axios的简单的使用方法

2021年9月29日 15:29 • 运维技巧 • 阅读 1246

Axios 是一个属于promise 的网络请求库，作用于node.js 和浏览器中。在服务端它使用原生 node.js http模块, 而在客户端则使用 XMLHttpRequests，下面我们来看下axios的简单的使用方法

配置请求拦截器
在请求拦截时可以做常规配置，如请求头添加token共有数据等

_axios.interceptors.request.use(config=>{
 // 添加token
 config.headers.token = 'token';
 // do something
},error=>Promise.reject(error))

配置返回拦截器

_axios.interceptors.response.use(config=>{
    // do something
},error=>{
    // 做统一的错误处理
    // 401 需授权
    // 404 接口不存在
    // 等等
})

取消重复请求
在实用中需要一个按钮多次快速点击，这样就会在很短时间内完成多次请求
在此我们会用到 axios.CancelToken 这个方法

封装取消请求的方法

class CancelToken {
  constructor() {
    this.store = new Map();
  }
  add (config)  {
      const key = this.getKey(config);
      new axios.CancelToken((cancel) => {
        if (this.store.has(key)) {
            this.remove(config)
        }
        this.store.set(key, cancel);
      });
  }
  remove (config)  {
      const key = this.getKey(config);
    if (this.store.has(key)) {
      let cancel = this.store.get(key);
      cancel(key);
      this.store.delete(key);
    }
  }
  // 获取唯一的key
  getKey(config){
    const { method, url, params, data } = config;
    return [method, url, params, data].join('-');
  }
}

使用CancelToken方法

const cancelToken = new CancelToken();
// 请求拦截器
axios.interceptors.request.use(config=>{
    cancelToken.add(config);
},error=>Promise.reject(error))

// 接收拦截器
axios.interceptors.response.use(
    response => {
        const config = response.config;
        cancelToken.remove(config)
        Promise.resolve(response)
    },
    error => {
        return Promise.reject(error);
    }
);