axios

axios是基于promise封装的http库

• 支持 Promise API （重点）
• 拦截请求和响应（重点）
• 转换请求数据和响应数据
• 取消请求（重点）
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

使用方式

1. 首先创建实例

axios.create() 

2. 配置默认信息，比如超时时间，请求格式，token之类的

axios.default.headers = {
  ...
  content-type: '',
  ...
}

3. 配置请求拦截器，一般是用来检测token或者是设置token的，（就是请求之前先看看这次请求合不合法，或者是为这次请求加点东西）

axios.interceptors.request.use(
  // config就是axois实例
  config => {
    config.headers["token"] = token // 这个token可能存在本地，也可能在store啥的
  }
)

4. 配置响应拦截器，就是请求之后对结果进行一个处理，看看成功了还是失败了，做出对应的处理

axios.interceptors.response.use(
  // res 就是返回的结果
  res => {
    一般是对响应的状态码做处理 400怎么半，500怎么办什么的
  }
)

5. 最后就是简单封装一下 get post 啥的

export function getData(url: string, json: object) {
  return axios
    .get(formateURLOnlyGet(url, json))
    .then(res => res.data)
    .catch(error => error.response);
}

6. 取消请求，知道就行啦

使用 cancel token 取消请求

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');