Javascript 如何使用axios拦截器?
我看过axios文档,但它只说Javascript 如何使用axios拦截器?,javascript,axios,Javascript,Axios,我看过axios文档,但它只说 // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(err
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
还有很多教程只显示了这段代码,但我不清楚它的用途,有人能给我举个简单的例子吗。它就像一个中间件,基本上它是在任何请求(无论是获取、发布、放置、删除)或任何响应(从服务器获得的响应)上添加的。 它通常用于涉及授权的情况 看看这个: 下面是另一篇关于这一点的文章,有一个不同的例子:
因此,其中一个示例的要点是,您可以使用拦截器来检测您的授权令牌是否过期(例如,如果您获得403),并重定向页面 简单地说,它更像是每个http操作的检查点。已进行的每个api调用都将通过此拦截器传递 那么,为什么有两个拦截器 api调用由两部分组成,一个请求和一个响应。由于它的行为类似于检查点,因此请求和响应具有单独的拦截器 一些请求拦截器用例- 假设您希望在发出请求之前进行检查,您的凭据是否有效?因此,您可以在拦截器级别检查您的凭据是否有效,而不是实际进行api调用 假设您需要为每个请求附加一个令牌,而不是在每次axios调用时复制令牌添加逻辑,您可以创建一个拦截器,在每个请求上附加一个令牌 一些响应拦截器用例- 假设您得到了一个响应,并根据api响应判断您想要推断用户已登录。因此,在响应拦截器中,您可以初始化处理用户登录状态的类,并在收到的响应对象上相应地更新它 假设您已请求具有有效api凭据的某些api,但您没有访问数据的有效角色。因此,您可以触发响应拦截器发出的警报,表示不允许该用户。这样,您就可以避免在每次发出axios请求时必须执行的未经授权的api错误处理 现在就可以提出这些用例 希望这有帮助:) 编辑 由于这个答案越来越受欢迎,下面是一些代码示例 请求拦截器 =>可以通过以下方式打印axios的配置对象(如果需要):
const DEBUG=process.env.NODE\u env==“开发”;
axios.interceptors.request.use((配置)=>{
/**在dev中,截取请求并将其记录到dev的控制台中*/
if(DEBUG){console.info(“✉️ ", 配置);}
返回配置;
},(错误)=>{
if(DEBUG){console.error(“✉️ “,错误);}
返回承诺。拒绝(错误);
});
=>如果要检查正在传递的头/添加任何其他通用头,可以在config.headers
对象中找到它。例如:
axios.interceptors.request.use((配置)=>{
config.headers.genericKey=“someGenericValue”;
返回配置;
},(错误)=>{
返回承诺。拒绝(错误);
});
=>如果是GET
请求,则可以在config.params
对象中找到正在发送的查询参数
响应拦截器
=>您甚至可以选择在拦截器级别解析api响应,并向下传递解析的响应,而不是原始响应。如果api在多个位置以相同的方式使用,这可能会节省您反复编写解析逻辑的时间。一种方法是在api请求
,并在响应拦截器中使用相同的参数来执行您的操作。例如:
//假设我们传递了一个额外的参数“parse:true”
get(“/city list”,{parse:true});
在响应拦截器中,我们可以像这样使用它:
axios.interceptors.response.use((response)=>{
if(response.config.parse){
//在此处执行操作并更改响应对象
}
返回响应;
},(错误)=>{
返回承诺.拒绝(错误.消息);
});
因此,在本例中,每当response.config
中有parse
对象时,操作就完成了,对于其余的情况,它将按原样工作
=>您甚至可以查看到达的HTTP
代码,然后做出决定。例如:
axios.interceptors.response.use((response)=>{
如果(response.status==401){
警报(“您未经授权”);
}
返回响应;
},(错误)=>{
if(error.response&&error.response.data){
返回承诺.拒绝(错误.响应.数据);
}
返回承诺.拒绝(错误.消息);
});
例如,如果您想了解从发送请求到收到响应的时间,可以使用此代码:
const axios = require("axios");
(async () => {
axios.interceptors.request.use(
function (req) {
req.time = { startTime: new Date() };
return req;
},
(err) => {
return Promise.reject(err);
}
);
axios.interceptors.response.use(
function (res) {
res.config.time.endTime = new Date();
res.duration =
res.config.time.endTime - res.config.time.startTime;
return res;
},
(err) => {
return Promise.reject(err);
}
);
axios
.get("http://localhost:3000")
.then((res) => {
console.log(res.duration)
})
.catch((err) => {
console.log(err);
});
})();
你在哪里编写这些拦截器?在每个组件上,还是在整个应用程序的全局/中心位置?@JamesPoulose它应该在中心位置,因为它的行为非常简单。它也可以在组件级别编写,但这通常会导致代码重复。这是不可能的wise@JamesPoulose你可以分开在您的服务层之外,将拦截器放在该服务层的基础上,类似于
services/index.js
。这样前端应用程序保持在一个位置,服务保持分离,与平台无关:D@AseemUpadhyay我将此代码放在services/index.js
和导出默认axios
中,然后从“services/index.js”
导入axios,无论我在哪里使用axios。但我看到互联网上的其他人为axios创建了一个包装器……你认为采用哪种方法