讲一下 Axios 源码中,拦截器是怎么实现的?
时间: 2024-09-23 22:16:37 浏览: 38
Axios 是一个流行的 JavaScript 库,用于处理基于浏览器和 Node.js 的 HTTP 请求。它提供了一种简洁的方式来设置请求拦截器和响应拦截器,允许你在发送请求之前或之后添加自定义功能。
拦截器的主要实现是通过两个 Promise 链式调用来完成的:
1. **发送前(请求拦截器)**:
- 在 `axios.interceptors.request.use` 方法中,你可以注册一个函数作为请求发送前的拦截器。这个函数接收一个请求配置对象(config)和一个发送请求的原函数(`config` 和 `dispatchRequest`)。如果函数返回一个 Promise 并且被拒绝,发送请求会被取消。
```javascript
axios.interceptors.request.use(config => {
// 在这里对 config 进行修改
return config;
}, error => {
// 对错误进行处理
return Promise.reject(error);
});
```
2. **发送后(响应拦截器)**:
- 类似地,`axios.interceptors.response.use` 注册了一个函数来处理响应。这个函数会接收到响应数据、响应状态码以及原响应对象。同样,如果返回的 Promise 被拒绝,后续操作将停止。
```javascript
axios.interceptors.response.use(response => {
// 处理成功的响应
return response.data;
}, error => {
// 处理错误的响应
return Promise.reject(error);
});
```
要访问源码,可以查看 Axios 源码中的 `src/interceptors/index.ts` 或者 `src/core/interceptors/request.ts` 和 `src/core/interceptors/response.ts` 文件。
阅读全文