axios封装统一处理接口,axios请求拦截器和响应拦截器
本文主要介绍了Axios代理配置和封装响应拦截处理方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
Axios代理配置和响应拦截处理代理配置响应内容拦截处理Axios的代理配置分析
Axios代理配置及响应拦截处理
Axios是vue推荐的异步处理方案，所以在多个vue项目中都有使用，所以下面是Axios的代理配置和响应拦截处理。
代理配置
代理主要用于解决跨域问题，但现在解决跨域问题的常规方式是让后端配置响应头，使用cors的跨域前端基本不需要任何处理。
但是有时候后端比较懒，所以前端需要通过代理请求来完成跨域，实际上相当于在本地打开一台服务器，通过服务器向另一台服务器发出代理请求。
但是这样会造成一些问题，就是部署到服务器时，前端项目也必须设置代理，或者直接部署与后端项目相同的环境。
下面是代理请求的配置：
//config/index.js文件
模块.导出={
开发{
代理表：{
/:{//替换以/开头的接口
目标：www.hahaha.com/,//to 3358号，这个地址
changeOrigin:真的，
ws:没错，
路径重写：{
/: //删除开头的斜杠。
}
},
/ws/* *:{//因为项目中使用了websocket，所以这里也配置了websocket的代理。
目标： ws://www .哈哈哈. com ，
ws:没错，
安全：假，
日志级别：“调试”，
}
}
.
}
Host: 0.0.0.0 ，//这里顺便说一下，将Host改为 0.0.0.0 后，局域网内的计算机可以直接访问项目，默认为localhost。
.
}
响应内容拦截处理
因为我们的axios请求响应会返回网络请求信息的状态码，而通常我们在实际使用中并不真正需要这样的内容，为了方便我们可以统一处理，最后只返回真正的实际内容。
同时，我们希望虽然网络请求成功，但是如果请求的内容失败，也流到catch步骤，即捕捉错误。
代码如下所示
const http=axios.create({
baseURL: api/，
超时：20000，
});//创建一个axios对象
//拦截axios对象响应
http . interceptors . response . use((response)={
//在这里输入表示请求成功。网络请求的状态码是200，但是我们要判断请求的内容是否成功。
if (response.data.ErrorCode！==0) {//因为在我们的项目中设置0意味着请求成功，所以我们会直接拒绝所有非零的。
return promise . reject(response . data)；
}
return promise . resolve(response . data)；//0的//ErrorCode直接返回response.data直接过滤掉网络的状态码。
}，(错误)={
//当你进入这里的时候，网络状态码不是200，可能是接口错误或者令牌缺失。
if(error . constructor . prototype . name== error ){//这里判断返回的对象是否是错误对象，如果是，说明网络请求是错误的。
消息({ showClose: true，
消息：“网络链接问题或登录失败！”,
类型：“错误”})
return promise(()={ })//这里我们可以做链式异步处理。
}
返回error.data//其他请求，说明请求内容有误，直接返回错误内容。
});
//返回处理前的内容
{
状态：200
statusText:“好的”，
数据{
错误代码：0，
令牌：“xxxx”，
名称： xxxx
}
}
//处理后返回内容
{
错误代码：0，
令牌：“xxxx”，
名称： xxxx
}
Axios的proxy代理配置解析
代理其实是一种方便前端开发的东西。可以在本地跨域访问其他网站，但是当页面被打包后，代理就会失效。
我在vue.config.js中设置了代理，代码如下
代理服务器：{
//匹配到的路径
/api: {
目标：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。