axios设置拦截器和中断请求

本文已参与「新人创作礼」活动，一起开启掘金创作之路

axios设置拦截器，中断请求

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

1、axios的使用方式

1. 在单页面中使用

   // 直接使用cdn引入
   // 使用 jsDelivr CDN:
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   // 使用 unpkg CDN:
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   
   

2. 安装使用 在集成项目中使用axios可直接安装axios

   npm install axios

2、axios中的interceptors

在axios中添加拦截器，拦截器interceptors在请求发送之前和响应之后作用，请求发送之前可以拦截请求，添加一些固定参数，修改cookie等操作，

请求成功响应之后则是可以修改响应数据的数据格式，方便调用

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果需要移除拦截器则使用eject

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

3、axios中取消请求

1、从v0.22.0开始，axios支持以fetch API方式，abortController的方式取消请求

const controller = new AbortController()

axios.get("/",{
  signal:controller.signal
}).then((e) => {
  console.log("eee",e)
})

controller.abort()

2、在该版本之前可以使用cancel token取消请求

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

// get请求
app.get('/user/list',{
  CancelToken:source.token
}).catch(function(e) {
  // handle error
})

// post请求
app.post("/user/list",{
 params:"xxx"
 },{
 cancelToken:source.token
})
source.cancel("xxx")

也可以通过传递一个execotor函数到CancelToken的构造函数来取消请求

const cancelToken = axios.cancelToken;
let cancel
app.get("/user",{
  cancelToken:new CancelToken(function execotor(c) {
   cancel = c
  })
})

// 取消
cancel()