当前位置：首页 > article >正文

深入了解 Axios 拦截器

article 2024/11/14 14:25:40

深入了解 Axios 拦截器

本文将向您介绍什么是 Axios 拦截器以及如何使用它们。通过分步指南和示例代码，您将学习如何使用 Axios 拦截器来处理请求和响应，并添加授权和错误处理。

什么是 Axios 拦截器？

Axios 拦截器允许您在请求发送和响应接收过程中拦截、操作和修改它们。Axios 提供了两种类型的拦截器：请求拦截器和响应拦截器。

请求拦截器允许您在发送请求之前修改请求的配置或添加自定义的头部和标记。它们也可以用于添加身份验证和授权令牌，以确保只有经过身份验证的用户才能访问受保护的资源。

响应拦截器允许您在接收响应之前拦截和处理它们。它们可以用于处理响应错误和重定向，以及过滤或转换响应数据。

使用 Axios 拦截器

让我们以请求拦截器为例来学习如何使用 Axios 拦截器。在您的 JavaScript 文件中添加以下代码：

import axios from ‘axios’;

axios.interceptors.request.use(
config => {
const token = localStorage.getItem(‘authToken’);
if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
},
error => {
return Promise.reject(error);
}
);
在上述代码中，我们使用 .interceptors 属性将请求拦截器添加到 Axios。.request.use() 方法接收两个函数参数：第一个函数在发送请求之前被调用，它接收一个 Axios 请求配置对象，并返回一个新的配置对象。在上述代码中，我们从本地存储中获取授权令牌，并把它添加到请求头中的 Authorization 标头中。

第二个函数是在请求发生错误时调用的。在这个例子中，我们简单地返回一个被拒绝的 Promise 对象，以便在链式调用中处理错误。

接下来，让我们学习如何使用响应拦截器。在您的 JavaScript 文件中添加以下代码：

axios.interceptors.response.use(
response => {
if (response.data && response.data.error_code) {
return Promise.reject(response.data);
}
return response;
},
error => {
if (error.response && error.response.status === 401) {
localStorage.removeItem(‘authToken’);
window.location.href = ‘/login’;
}
return Promise.reject(error.response.data);
}
);
在上述代码中，我们使用 .interceptors 属性将响应拦截器添加到 Axios。.response.use() 方法接收两个函数参数：第一个函数在成功响应时调用，它接收响应对象，并返回新的响应对象或 Promise 对象。在上述代码中，我们检查响应数据是否包含错误代码，如果是，我们就返回一个被拒绝的 Promise 对象。否则，我们将返回原始响应对象。