实现axios的请求拦截拦截不到请求
一、整件事情的流程
为了帮助小白理解如何实现"axios的请求拦截拦截不到请求"，我们可以使用以下步骤来展示整个流程：
| 步骤 | 描述 |
|---|---|
| 1 | 安装axios依赖 |
| 2 | 创建axios实例 |
| 3 | 添加请求拦截器 |
| 4 | 发起请求 |
| 5 | 添加响应拦截器 |
| 6 | 处理响应结果 |
二、每一步需要做什么
1. 安装axios依赖
首先，你需要在项目中安装axios依赖，可以使用以下命令：
npm install axios
2. 创建axios实例
在项目中，你需要创建一个axios实例用于发起请求。你可以通过以下代码来创建一个axios实例：
import axios from 'axios';
const instance = axios.create({
baseURL: ' // 设置请求的基础URL
timeout: 5000 // 设置请求超时时间
});
export default instance;
在上述代码中，我们通过axios.create()方法创建了一个axios实例，并通过baseURL设置了请求的基础URL，通过timeout设置了请求的超时时间。你可以根据实际需求进行相应的配置。
3. 添加请求拦截器
在axios实例中，你可以通过interceptors属性来添加请求拦截器。请求拦截器可以用于在发送请求前对请求进行一些处理，如添加请求头，添加认证信息等。你可以使用以下代码来添加请求拦截器：
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer token'; // 添加请求头Authorization
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
在上述代码中，我们通过instance.interceptors.request.use()方法来添加请求拦截器。在请求拦截器中，我们可以对请求的config进行修改或处理，并最终通过return返回修改后的config。
4. 发起请求
在实际使用axios时，你可以通过axios实例的各种方法来发起请求，如get、post等。以下是一个使用GET方法发起请求的示例代码：
instance.get('/api/user')
.then(response => {
// 请求成功的处理逻辑
console.log(response.data);
})
.catch(error => {
// 请求失败的处理逻辑
console.error(error);
});
在上述代码中，我们使用instance.get()方法发起了一个GET请求，并通过.then()和.catch()方法分别处理请求成功和请求失败的情况。
5. 添加响应拦截器
类似于请求拦截器，你可以通过interceptors属性来添加响应拦截器。响应拦截器可以用于在接收到响应后对响应进行一些处理，如处理错误信息等。你可以使用以下代码来添加响应拦截器：
instance.interceptors.response.use(
response => {
// 对响应数据做些什么
return response;
},
error => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
在上述代码中，我们通过instance.interceptors.response.use()方法来添加响应拦截器。在响应拦截器中，我们可以对响应的数据进行修改或处理，并最终通过return返回修改后的响应。
6. 处理响应结果
在请求完成后，你可以通过.then()方法来处理响应结果。以下是一个示例代码：
instance.get('/api/user')
.then(response => {
// 请求成功的处理逻辑
console.log(response.data);
})
.catch(error => {
// 请求失败的处理逻辑
console.error(error);
});
在上述代码中，我们通过.then()方法来处理请求成功的情况，并通过.catch()方法来处理请求失败的情况。
