简单来说,它更像是每个HTTP操作的检查点。已进行的每个 API 调用都通过此侦听器传递。
那么,为什么是两个拦截器呢?
API 调用由两半、一个请求和一个响应组成。由于它的行为类似于检查点,因此请求和响应具有单独的侦听器。
一些请求拦截器用例 -
假设您要在发出请求之前检查您的凭据是否有效。因此,您可以在拦截器级别检查您的凭据是否有效,而不是实际进行 API 调用。
假设您需要将令牌附加到发出的每个请求,而不是在每次 Axios 调用时复制令牌加法逻辑,您可以创建一个侦听器,该侦听器在发出的每个请求上附加一个令牌。
一些响应拦截器用例 -
假设您收到了响应,并且根据 API 响应进行判断,您希望推断出用户已登录。因此,在响应侦听器中,可以初始化处理用户登录状态的类,并在收到的响应对象上相应地更新该类。
假设您已请求某个具有有效 API 凭证的 API,但您没有访问数据的有效角色。因此,您可以从响应侦听器触发警报,指出不允许该用户。这样,您就可以避免对每个Axios请求执行的未经授权的API错误处理。
下面是一些代码示例
请求拦截器
-
可以通过以下操作(在这种情况下,通过检查环境变量)来打印 axios 的配置对象(如果需要):
const DEBUG = process.env.NODE_ENV === "development";
axios.interceptors.request.use((config) => {
/** In dev, intercepts request and logs it into console for dev */
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);
});
-
如果是请求,则可以在 object 中找到正在发送的查询参数。GET
config.params
响应拦截器
-
您甚至可以选择在拦截器级别解析 API 响应,并将解析的响应(而不是原始响应)向下传递。它可能会节省您一次又一次地编写解析逻辑的时间,以防 API 在多个位置以相同的方式使用。一种方法是在 中传递一个额外的参数,并在响应拦截器中使用相同的参数来执行操作。例如:api-request
//Assume we pass an extra parameter "parse: true"
axios.get("/city-list", { parse: true });
一旦,在响应拦截器中,我们可以像这样使用它:
axios.interceptors.response.use((response) => {
if (response.config.parse) {
//perform the manipulation here and change the response object
}
return response;
}, (error) => {
return Promise.reject(error.message);
});
因此,在这种情况下,每当 中有对象时,操作就会完成,对于其余情况,它将按原样工作。parse
response.config
-
您甚至可以查看到达的代码,然后做出决定。例如: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);
});