Axios学习01

什么是axios

axios是基于Promise用于浏览器和nodejs的http库，可以发送get、post、delete、put、patch等请求。具有以下常用特征：

1. 支持Promise API
2. 取消请求
3. 拦截请求和响应
4. 自动转换JSON数据
5. 转换请求和响应数据
6. 客户端支持防止CSRF/XSRF攻击

基本使用

// get请求
const queryUser = (params) => axios.get('/get/user', params)
  .then((resp) => { console.log(resp) })
  .catch((err) => { console.log(err) })
  .finally(() => { console.log('总是执行') });

// post请求
const saveUser = (data) => axios.post('/save/user', data)
  .then((resp) => { console.log(resp) })
  .catch((err) => { console.log(err) })
  .finally(() => { console.log('总是执行') });

传配置方式创建请求

用法：

axios(config)
  .then((resp) => { console.log(resp) })
  .catch((err) => { console.log(err) })
  .finally(() => { console.log('总是执行') });

config常用配置：

const axiosConfig = {
  // 请求的接口路径
  url: '/get/user',
  // 请求方式，默认get
  method: 'get',
  // baseURL将自动加在url前面
  baseURL: '/api',
  // 自定义请求头
  headers: {},
  // url参数
  params: {},
  // 作为请求主体被发送的数据，适用于post
  data: {},
  // 设置请求超时的毫秒数，超时则被中断
  timeOut: 1000,
  // 指定用于取消请求的cancel token
  cancelToken: new CancelToken((cancel) => {}),
  // 用于验证响应status，如果验证通过则resolve，否则reject
  validateStatus(status) {
    // default
    return status >= 200 && status < 300;
  },
  // 上传进度处理，方法参数为原生进度事件信息对象
  onUploadProgress(progressEvent) {
    console.log(progressEvent);
  },
  // 下载进度处理，方法参数为原生进度事件信息对象
  onDownloadProgress(downEvent) {
    console.log(downEvent);
  },
}

使用自定义配置新建axios实例：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '/api',
});
axiosInstance.get('/get/user');
// 相当于
axios.get('/api/get/user');

取消接口请求

当所有的请求都使用了同一个token时，调用cancel可以取消所有的请求

const tokenSource = () => {
  const CancelToken = axios.CancelToken;
  return CancelToken.source();
};
const queryUser = (params) => {
  const source = tokenSource();
  const queryUserPromise = http({
    url: '/get/user`',
    cancelToken: source.token,
  });
  return {
    queryUserPromise,
    cancelQueryUser() {
      source.cancel();
    },
  }
}