axios的简单的使用

• 2021 年 9 月 26 日
• 筆記
• Axios, cancelToken

Axios 是什么?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

基础用法

引入之后直接使用，不做任何配置

import axios from 'axios';

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then((response) => {
    // 处理成功情况
    console.log(response);
  })
  .catch((error) => {
    // 处理错误情况
    console.log(error);
  })

常规用法

一般我们在项目中使用都会统一的配置接口的baseUrl，超时时间等等

import axios from 'axios';

const _axios = axios.create({
    baseUrl: '//localhost:9333/api',
    timeout: 1000 * 15,
})

配置请求拦截器

在请求拦截器中可以做一些常规配置，比如要给请求头添加token或附加一些特殊的共有数据等等

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

配置返回拦截器

在请求拦截器中可以做一些常规配置，比如要给请求头添加token或附加一些特殊的共有数据等等

_axios.interceptors.response.use(config=>{
    // do something
},error=>{
    // 做一些统一的错误处理
    // 401 需要授权
    // 404 接口不存在
    // 405 请求方式不允许，本来接口是get的而你使用了post
    // 等等
})

取消重复请求

在项目中会经常碰到一个按钮连续多次的快速点击，这样就会在极短的时间内请求多次，实际上我们只需要一次返回结果就可以，这个时候就可以取消之前多次的重复提交。

在此我们会用到 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);
    }
);

至此，axios的常规使用就介绍完了，感谢各位的阅读。