axios请求成功不执行then,axios多次请求
本文主要介绍了多次拦截器在axios中的问题解决。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
问题原因解决方案
问题
在打包axios的时候，我遇到了一个问题，就是每次发出请求，axios都会拦截两次响应。我很迷惑，一时想不出主意。
代码如下：
Http类{
构造器(配置){
this.axios=axios
this . axiosinterceptor=undefined；
//公共标头
let defaultHeaders={
Content-Type“:”应用程序/JSON；字符集=UTF-8 ，
Accept: application/json ，//由header指定，得到的数据类型是JSON application/json，text/plain，*/*，
x-终点: . 10
}
if(配置？标题){
for (let i in config.headers) {
default headers[I]=config . headers[I]；
}
}
axios({
//`baseurl 将自动添加到` url 前面，除非` url 是绝对url。
//通过设置一个baseURL，可以很容易地为axios实例的方法传递相对URL。
baseURL: config？baseURL，
//` URL 是用于请求的服务器URL
网址：配置？url，
//` method 是创建请求时使用的方法。
方法：config？方法 get ，
//`headers 是要发送的自定义请求标头。
标题：{.默认标题}，
//`params `是随请求一起发送的URL参数。
//它必须是普通对象或URLSearchParams对象
params: config？method===get ？配置？params {} : {}，
//params serializer 是负责 params 序列化的函数。
//(例如https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
paramsSerializer:函数(params) {
return Qs.stringify(params，{arrayFormat:括号 })
},
//`data 是作为请求主体发送的数据。
//仅适用于这些请求方法“PUT”、“POST”和“PATCH”
//未设置transformRequest时，它必须是以下类型之一：
//- string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
//-浏览器专用：表单数据、文件、Blob
//-专用于节点：流
数据：配置？method===post ？配置？params {} : {}，
//`timeout 指定请求超时的毫秒数(0表示无超时)
//如果请求的通话费用超过超时，请求将被中断。
超时：0，
//` with credentials 指示跨域请求是否需要凭据。
With credentials: false，如果//default为true，则生成跨域，跨域携带cookie。
//`responsetype `表示服务器响应的数据类型，可以是数组缓冲区， blob ，文档， JSON ，文本，流
responseType: json ，//默认值
});
//添加请求拦截器
axios . interceptors . request . use((config)={
//在发送请求之前做一些事情
返回配置；
}，函数(错误){
//对请求错误做些什么
return Promise.reject(错误)；
});
//添加响应拦截器
axios . interceptors . response . use((RES)={
const { status，data }=res
//处理错误状态提示。
let message=
如果(状态200 状态=300) {
//处理http错误并将其扔给业务代码
message=this.showResState(状态)
if (typeof res.data===string) {
res.data={代码：状态，消息}
}否则{
res.data.code=状态
res.data.message=消息
}
}
返回res.data
}，函数(错误){
//对响应错误采取措施
return Promise.reject(错误)；
});
}
get(url，params={}){
//为具有给定ID的用户创建请求
返回新承诺((解决，拒绝)={
this.axios.get(url，{
参数
}).然后(response={
//2.如果成功，调用resolve(值)
解决(响应)；
})。catch(错误={
//3.如果失败，不要调用reject(reason)，而是提示异常信息。
拒绝(错误)
//message.error(请求出错： error.message )。然后(r={ })；
}).最后(()={
})
});
}
post(url，params={}){
返回新承诺((解决，拒绝)={
this.axios.post(url，params)。然后(response={
//2.如果成功，调用resolve(值)
解决(响应)；
})。catch(错误={
//3.如果失败，不要调用reject(reason)，而是提示异常信息。
拒绝(错误)
//message.error(请求出错： error.message )。然后(r={ })；
}).最后(()={
})
});
}
showResState(州){
let message=“”；
//这里只是一些常见的例子，可以根据需要进行配置。
开关(状态){
案例400:
Message=请求错误(400)
破裂
案例401:
Message=未授权，请重新登录(401)
破裂
案例403:
Message=拒绝访问(403)
破裂
案例404:
Message=请求中的错误(404)
破裂
案例500:
Message=服务器错误(500)
破裂
案例501:
Message=服务未实现(501)
破裂
案例502:
Message=网络错误(502)
破裂
案例503:
Message=服务不可用(503)
破裂
默认值：
Message=`连接错误(${state})！`
}
返回` ${message}，请检查网络或联系网站管理员！`
}
//插件初始化时会传入所需的配置项。
autoAddToken(配置){
//在请求阶段修改config配置项并添加令牌。可以自定义特定的属性名称。
config.headers？={}
config . headers . authorization=local storage . token null
返回配置
}
}
导出默认Http
可能遇到过这种问题的小伙伴一眼就能看出问题，没遇到过这种问题的可能又要遭殃了。
原因
如果使用use，就像Node.js中的use一样，会不断地给axios对象添加拦截器。因为我把拦截器放在了函数中，只要执行了函数，拦截器函数就会再次添加到axios对象中。
所以推荐的方式是把拦截器放在函数外面，但是我的需求决定了我必须把它放在函数里面。那么如何解决呢？
解决
在该文件中添加唯一变量标识符let interceptor=null，并做出判断。只要拦截器存在，就不会继续添加。一些代码如下：
如果(！this.interceptor) {
//添加响应拦截器
this . interceptor=axios . interceptors . response . use((RES)={
const { status，data }=res
//处理错误状态提示。
let message=
如果(状态200 状态=300) {
//处理http错误并将其扔给业务代码
message=this.showResState(状态)
if (typeof res.data===string) {
res.data={代码：状态，消息}
}否则{
res.data.code=状态
res.data.message=消息
}
}
返回res.data
}，函数(错误){
//对响应错误采取措施
return Promise.reject(错误)；
});
}
它不起作用。必须在类外提取拦截器，问题就解决了。
这里只公布了一些主要代码：
从“axios”导入axios；
/*将拦截器放在封装类之外*/
//添加请求拦截器
axios . interceptors . request . use((config)={
//发送添加令牌等认证功能的请求前做什么
//.
返回配置；
}，函数(错误){
//对请求错误做些什么
return Promise.reject(错误)；
});
//添加响应拦截器
axios . interceptors . response . use((RES)={
const { status }=res
//在发送结果之前做一些事情来处理错误状态提示。
//.
返回res.data
}，函数(错误){
//对响应错误采取措施
return Promise.reject(错误)；
});
Http类{
构造器(配置){
this.axios=axios
//这里还需要处理配置，省略代码。
this.config=config
}
//获取请求
get(url，params={}，headers={}){
//.
}
//发布请求
post(url，params={}，headers={}){
//.
}
}
导出默认Http
//如果没有特殊要求，就用这一个对象。公共头可以在这里配置。如果需要多个实例，可以用这种方法创建多个实例并导出它们。
export const Axios=new Http({
标题：{
x-http-token: xxx
}
});
这里不描述具体方法，只描述解决问题的方法。后续会针对axios类的封装写一篇单独的文章，详细讲解。
以上是解决axios拦截器多执行问题的详细内容。关于axios拦截器多重执行的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。