vuaxios拦截器增加加载的问题及其实现方法

很多时候，当页面被Ajax刷新时，我们希望加载图标会出现在上面，让用户体验更好。所以如果我们在Axios中每次发出请求都显示加载图标，那么如果没有一个全局的方法，必然会产生代码冗余的问题。有什么方法可以实现这个方法吗？

这里，我们将使用Axios的请求拦截器和相应的拦截器

首先，我们向请求拦截器添加一个VUX的加载组件

axios . interceptors . request . use(config={//request interceptor，call loading plug-in//display loading//判断是否重复提交请求，即loading是否还存在，如果存在，不显示新的loading let is show=window . app . $ vux . loading . is visible()if(！isshowconfig . show Loading){ window . app . $ vux . Loading . show({ text : ' Loading ' })} config . data=JSON . stringify(config . data)；config . headers={ ' Content-Type ' : ' application/JSON '，}返回配置；}，错误={ return Promise . reject(err)；});在整个数据中，我们可以看到一个参数是$vux.loading.isVisible()。这是vux附带的装载状态显示参数。如果正在显示加载，它将为真，否则将显示为假

因为我们不希望在同时有多个请求时有多个加载状态，所以用户会看起来很困惑，所以我们在调用时应该先判断这个状态。

然后在响应拦截器中将其关闭

以下示例代码介绍了vue中使用的axios

1.安装axios

国家预防机制：

$ npm安装axios -S

cdn:

脚本src=' http :https://unpkg.com/axios/dist/axios . min . js '/脚本

2.配置axios

在项目中创建新的api/index.js文件来配置axios

api/index.js

从“axios”导入axios；let http=axios . create({ baseurls : ' http://localhost :8080/'，withCredentials: true，header RS : { ' Content-Type ' : ' application/x-www-form-URL encoded；charset=utf-8' }，transformrequest :[function(data){ let new data=' '；for(让k进入数据){ if(data . hasown property(k)==true){ new data=encodeURIComponent(k)'=' encodeURIComponent(data[k])' '；} }返回新数据；}]});函数apiAxios(方法、url、参数、响应){ http({ method:方法、url: url、data:方法==' POST ' | | method===' PUT '？params : null，params :方法==='GET' ||方法==='DELETE '？params : null，})。然后(函数(RES){ response(RES)；}).catch(function(err)){ response(err)；})}导出默认{ get:函数(url，params，response) { return apiAxios('GET '，url，params，response) }，post:函数(url，params，response) { return apiAxios('PUT '，url，params，response) }，delete:函数(url，params，response) { return apiAxios(' PUT '，url，params，response) }，DELETE :函数(url，params，response){ return apiAxios('

这里配置了POST、GET、PUT和DELETE方法。并自动将JSON格式数据转换为URL拼接方式

同时配置了跨域。如果不需要，可以将withCredentials设置为false

并将默认的头地址设置为：http://localhost 33608080/，这样调用时只需要写访问方法。

3.使用axios

注意：PUT请求默认会发送两次，第一次预览请求不包含参数，所以后端不能限制PUT请求地址的参数

首先，将该方法引入main.js中

从“”导入Api。/API/index . js '；Vue.prototype. $ api=Api然后在你需要的地方调用它

这个。$ API . post(' user/log in . do(address)'，{ '参数名' : '参数值' }，response={ if(response . status=200 response . status 300){ console . log(response . data)；\ \请求成功，响应是成功信息参数} else { console . log(response . message)；\ \请求失败，响应为失败信息} })；摘要

以上就是边肖介绍的Vux Axios拦截器增加加载的问题和实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！