ReactJS应用程序中设置Axios拦截器方法demo
作者：Jovie
这篇文章主要为大家介绍了ReactJS应用程序中设置Axios拦截器方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
简介
在这篇文章中，我们将学习如何干净地设置Axios以实现代码的可读性和可重用性。我们之前已经学习了如何在我们的reactJS应用程序中设置Axios 。因此，不要浪费任何时间，让我们直接进入它。
当我们学会了如何发送HTTPS请求和接收响应时，我们与服务器进行数据通信，每次都必须使用响应中的解构数据。如果我告诉你Axios为你提供了一个内置的机制，以更简洁的方式处理所有这些麻烦，你会怎样？
Axios中的拦截器
有了Axios拦截器， 你现在可以在请求和响应被then()或catch()块处理之前拦截和钩住它们。让我们看看它们的作用，在config目录下制作https.js，就像这样
配置目录下的HTTPS文件
现在编写代码，在Axios中使用拦截器
import axios from "axios";
export const axiosInstance = axios.create({
baseURL: "https://swapi.dev/api/",
});
axiosInstance.interceptors.request.use(
function (config) {
// Do something before request is sent
return config;
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
axiosInstance.interceptors.response.use(
function (response) {
return response;
},
function (error) {
return Promise.reject(error);
}
);
在这里，我们为Axios实例创建了拦截器，处理请求和响应，这使得我们的代码可以重复使用，并且可读。
拦截器还允许我们在请求中添加或定制我们的头信息，方法如下
axiosInstance.interceptors.request.use(
async (config) => {
const token = # Your token goes over here;
if (token) {
config.headers.accessToken = token;
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
我们已经知道了如何在我们的reactJS应用中使用Axios，在这一章中介绍了如何通过使用拦截器来充分利用Axios的优势，更多关于ReactJS设置Axios拦截器的资料请关注脚本之家其它相关文章！