实例化

上一篇说了基本用法，实际使用中并不会直接调用，而是实例化一个对象 并配置好基本参数，然后所有请求走实例化对象

const service = axios.create({
  baseURL: '/api1.0/'
  timeout: 5000 // request timeout
})

function list(query) {
  return service({
    url: 'getList',
    method: 'post',
    data: query
  })
}
// 调用示例
list(query).then()

配置参数较多，参照 Axios官网

拦截器

axios支持拦截器，可以在请求和返回时进行拦截处理

axios.interceptors.request.use(config => config, error => error);
axios.interceptors.response.use(response => response, error => error);

拦截器同样是符合Promise标准 一般用的较多的是在请求时加入 token ，返回数据时进行数据过滤和权限判断

service.interceptors.request.use(config => {
  // 让每个请求携带token
  config.headers['token'] = 'xxxx'
  return config
}, error => {
  console.log(error) // for debug
  Promise.reject(error)
})

service.interceptors.response.use(
  response => response,
  error => {
    console.log('request.err' + error)// for debug
    if (error.response && error.response.status === 401) {
      // session失效
      // 登录超时，请重新登录
      // do something
    }
    return Promise.reject(error)
  })

错误处理

Axios默认把 200 <= status < 300 归为 resolve，其它则为 reject 可以修改参数中 validateStatus 来进行修改

validateStatus: function (status) {
  return status >= 200 && status < 300; // default
},

reject 时返回error对象，可以从 error.response 获取http对象

如果是本地发生的异常，还没到请求阶段，则没有 response 对象

取消请求

调用定时器 setTimeout() 会返回一个整形token，然后用 clearTimeout() 传入返回的token即可清除定时器 axios 的取消也是一样道理，只是不是在请求时返回token，而是把token附加到请求参数

const source = axios.CancelToken.source()
console.log('cancelToken', source)

初始化一个 CancelToken 对象 里面有个 cancel() 方法和名为 token 的 Promise对象

// 请求时传入 cancelToken
request({
    url: 'list',
    method: 'post',
    data: query,
    cancelToken: source.token
}).catch(e => {
    console.log(e.message)
})
// 取消请求
source.cancel('some request is cancel')

此时 catch 会打印 some request is cancel