详细解释Vue中使用的Axios拦截器

要求是拦截前端网络请求和对应。

废话不多说，直接去干货。

我使用vue-cli3，所以这个配置文件是我自己创建的。

首先介绍env.js

//根据不同的环境更改不同的baseUrllet baseUrl=//在开发环境中，if (process。env . node _ env==' development '){ base URL=' '；} else if (process。env . node _ env==' production '){ base URL=' production address '；}导出{baseUrl，//导出baseUrl在这里，我先设置开发环境和生产环境的地址，并把它们抛出去。

查看axios.js

从“”导入{baseUrl，//引入baseUrl}./config/env '；从“axios”导入axios；从“qs”导入QS；//从导入vuex './src/store/index '；//创建axios实例let service=axios . create({ base URL : base URL，//请求前缀超时3360 20000，//请求超时时间crossDomain: true，//设置跨域with redentials : true//设置跨域并设置访问权限以允许cookie信息跨域携带})//设置post默认内容-type service . defaults . headers . post[' content-type ']=' application/x-www-form-URL encoded；charset=UTF-8 '；//添加请求拦截器service . interceptors . request . use((config)={//console . log()//下面的代码是如何在拦截器中调用vuex管理状态的。//我在这里做了一个面具。//vuex。$商店。提交(' open _ loading ')；//判断请求模式是否为POST，转换格式config.method==='post '？config . data=QS . stringify({ 0.config . data }): config . params={ 0.config . params }；//在发送return config之前处理请求，{(错误)={//请求错误处理returnpromise。reject(error)})//添加一个响应拦截器service . interceptors . response . use((response)={ let { data }=response；返回数据}，(错误)={ let info={}，{ status，statusText，data }=error.response if(！错误。response) {info={code: 5000，msg : ' network error ' } } else {//在此排列错误消息格式info={code3360status，data:data，msg 3360 statustext } })/* * *抛出服务*/导出默认服务。最后，将这个axios.js文件引入main.js，并将引入的axios挂载到Vue实例上。

完美！如果有什么问题，请向你的老板寻求建议。谢谢您们。

踩坑：

如何在axios拦截器中使用vuex，首先要介绍vuex的js文件，然后才能使用，就这么简单。

以上就是边肖介绍的使用Axios拦截器对Vue的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！