vue接口总是请求超时_vue axios调用接口时请求超时

这次给大家带来vue axios调用接口时请求超时，处理vue axios调用接口时请求超时的注意事项有哪些，下面就是实战案例，一起来看一下。

自从使用Vue2之后，就使用官方推荐的axios的插件来调用API，在使用过程中，如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。

具体原因

最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。

按照搜索引擎给出来的解决方案，解决不了我的问题.

最近在研究AOP这个开发编程的概念，axios开发说明里边提到的栏截器(axios.Interceptors)应该是这种机制，降低代码耦合度，提高程序的可重用性，同时提高了开发的效率。

带坑的解决方案一

我的经验有限，觉得唯一能做的，就是axios请求超时之后做一个重新请求。通过研究 axios的使用说明，给它设置一个timeout = 6000axios.defaults.timeout = 6000;

然后加一个栏截器.// 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);

});

这个栏截器作用是 如果在请求超时之后，栏截器可以捕抓到信息，然后再进行下一步操作，也就是我想要用 重新请求。

这里是相关的页面数据请求。this.$axios.get(url, {params:{load:'noload'}}).then(function (response) {

//dosomething();

}).catch(error => {

//超时之后在这里捕抓错误信息.

if (error.response) {

console.log('error.response&#