简单来说,拦截器是每个HTTP动作的一个检查点。每个API调用都会经过这个拦截器。
那么,为什么需要两个拦截器呢?
一个API调用由请求和响应两部分组成。由于它像一个检查点一样运行,因此请求和响应具有分别的拦截器。
一些请求拦截器的用例 -
假设您想在发出请求之前检查您的凭据是否有效。因此,您可以在拦截器级别上检查您的凭据是否有效,而不是实际进行API调用。
假设您需要将令牌附加到每个请求中,而不是在每个Axios调用中重复令牌添加逻辑,您可以创建一个拦截器,在每个发出的请求上附加一个令牌。
一些响应拦截器的用例 -
假设您收到了一个响应,并根据API响应判断用户是否已登录。因此,在响应拦截器中,您可以初始化一个处理用户登录状态的类,并根据接收到的响应对象相应地更新它。
假设您使用有效的API凭据请求了一些API,但没有有效的角色访问数据。因此,您可以从响应拦截器触发一个警报,表示用户不被允许。这样,您将得到免于在每个Axios请求上执行未经授权的API错误处理的救赎。
以下是一些代码示例
请求拦截器
可以通过执行以下操作(在这种情况下,通过检查环境变量)打印axios的配置对象:
const DEBUG = process.env.NODE_ENV === "development";
axios.interceptors.request.use((config) => {
if (DEBUG) { console.info("✉️ ", config); }
return config;
}, (error) => {
if (DEBUG) { console.error("✉️ ", error); }
return Promise.reject(error);
});
如果想要检查正在传递的标头/添加任何通用标头,可以在config.headers
对象中找到。例如:
axios.interceptors.request.use((config) => {
config.headers.genericKey = "someGenericValue";
return config;
}, (error) => {
return Promise.reject(error);
});
如果是一个GET
请求,发送的查询参数可以在config.params
对象中找到。
响应拦截器
axios.get("/city-list", { parse: true });
一次,在响应拦截器中,我们可以像这样使用它:
axios.interceptors.response.use((response) => {
if (response.config.parse) {
}
return response;
}, (error) => {
return Promise.reject(error.message);
});
因此,在这种情况下,只要response.config
中有一个parse
对象,就会进行操作,对于其余情况,它将按原样工作。
您甚至可以查看到达的HTTP
代码,然后做出决定。例如:
axios.interceptors.response.use((response) => {
if(response.status === 401) {
alert("You are not authorized");
}
return response;
}, (error) => {
if (error.response && error.response.data) {
return Promise.reject(error.response.data);
}
return Promise.reject(error.message);
});
services/index.js
。这样前端应用程序就可以保持在一个地方,而服务则保持分离和平台无关 :D - Aseem Upadhyayservices/index.js
中,然后export default axios
,并在使用axios的任何地方import axios from "services/index.js"
。但是我发现网上还有其他人创建axios的包装器...你个人使用哪种方法?谢谢 - Raj