UNI AJAX

# 创建和配置

在项目开发中，我们的接口地址是通常是同个根地址，我们需要配置接口根地址方便代码的维护。而且我们对于请求和响应的都会做同样的判断，这里就可以用到拦截器，避免冗余的代码。

# 创建实例

首先我们先新建ajax.js文件，用于配置项及拦截器。

ajax.create([config])

// 引入 uni-ajax 模块
import ajax from 'uni-ajax'

// 创建实例
const _ajax = ajax.create({
  // 默认配置（配置参数如下）
})

// 导出创建后的实例
export default _ajax

# 实例配置

config是一个对象，该对象的参数如下。

参数 类型 默认值 说明 平台差异说明
baseURL String 请求根地址
data Object 请求的参数，当类型为 object 时会合并在请求时的 data App（自定义组件编译模式）不支持 ArrayBuffer 类型
header Object 请求头，支持配置不同请求方式的请求头 H5 端会自动带上 cookie 不可手动覆盖
method String GET ajax() 默认的请求方式
timeout Number 30000 超时时间，单位 ms 微信小程序（2.10.0）、支付宝小程序
dataType String json 如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseType String text 设置响应的数据类型。合法值：text、arraybuffer App 和支付宝小程序不支持
sslVerify Boolean true 验证 ssl 证书 仅 App 安卓端支持（HBuilderX 2.3.3+）
withCredentials Boolean false 跨域请求时是否携带凭证（cookies） 仅 H5 支持（HBuilderX 2.6.15+）
firstIpv4 Boolean false DNS 解析时优先使用 ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
validateStatus Function [200, 300) 定义对于给定的 HTTP 状态码返回拦截状态
... Any 传递给拦截器的值

# baseURL

请求根地址baseURL将自动加在url前面，除非url是一个绝对 URL (http 或 https 开头)。

// 创建实例
const _ajax = ajax.create({ baseURL: 'https://www.example.com' })

// 发起请求，最终发起请求的 url 为 https://www.example.com/api
_ajax('api')

# data

请求的参数如果是 object 类型会合并在请求时的 data。

// 创建实例
const _ajax = ajax.create({
  data: { hello: 'hello' }
})

// 发起请求
_ajax('api', { ajax: 'ajax' })

// 最终发起请求的 data
// 如果发起请求时的字段是与默认配置的字段相同，则采用发起请求时的值
{
  hello: 'hello',
  ajax: 'ajax'
}

这里的header也可以为不同请求方式添加对应的请求头（注意这里的请求方式属性要小写）。header不仅可以在创建实例配置中，也可以在请求拦截器中配置，一般来说固定的请求头放在创建实例配置中，动态请求头放在请求拦截器中。

// 创建实例
const _ajax = ajax.create({
  header: {
    post: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
  }
})

// 请求拦截器
_ajax.interceptors.request.use(
  config => {
    config.header.post['token'] = uni.getStorageSync('TOKEN')
    return config
  }
)

关于header的优先级，在下面的例子中，假如请求头为Prior，数值越大表示优先级越高。

// 创建实例
const _ajax = ajax.create({
  header: {
    Prior: 1
    post: { Prior: 2 }
  }
})

// 请求拦截器
_ajax.interceptors.request.use(
  config => {
    config.header.post['Prior'] = 3
    config.header['Prior'] = 5
    return config
  }
)

// 发起请求
_ajax({
  method: 'POST',
  header: { Prior: 4 }
})

# method

当请求方法为ajax()常规方法时，如果没有传入指定的method，这时的请求方式为默认配置的method或GET，并且无论是在配置中还是请求中大小写都不受限。

// 创建实例
const _ajax = ajax.create({ method: 'post' })

// 发起请求
_ajax()    // 这里没有传入指定的 method，则以默认配置的 method，这里即 POST

# validateStatus

定义对于给定的 HTTP 状态码返回拦截状态。如果 validateStatus 返回 true（或者设置为 null 或 undefined），响应数据会被响应拦截器的onFulfilled，否则将被onRejected。

// 创建实例
const _ajax = ajax.create({
  // statusCode 的值为 HTTP 状态码，类型为 number / undefined
  // 当为 undefined 时可能为中断请求、无网络、等等其它服务端没响应的情况
  validateStatus: statusCode => statusCode >= 200 && statusCode < 300    // 默认
})

← 拦截器 →