This article mainly introduces the vue axios request timeout and the perfect solution to set up a re-request. It also introduces the basic usage of axios. Friends in need can refer to it
Since using Vue2, Use the officially recommended axios plug-in to call the API. During use, if the server or network is unstable and packets are dropped, how should you deal with it? Let me share with you my experience.
Specific reasons
The company is currently working on a project. The server-side data interface uses the API output by Php. Sometimes it is called The process will fail, and Provisional headers are shown in Google Chrome.
According to the solutions given by the search engine, my problem cannot be solved.
I have recently been studying the concept of AOP development and programming, which is in the axios development instructions. The axios.Interceptors mentioned should be this mechanism, which reduces code coupling, improves program reusability, and improves development efficiency.
Solution 1 with pitfalls
My experience is limited and I think the only thing I can do is to make a new request after the axios request times out. . By studying the instructions for use of axios, set a timeout = 6000
axios.defaults.timeout = 6000;
and then add a column cutter.
// 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); });
The function of this interceptor is that after the request times out, the interceptor can capture the information and then proceed to the next step, that is, I want to re-request.
Here are the relevant page data requests.
this.$axios.get(url, {params:{load:'noload'}}).then(function (response) { //dosomething(); }).catch(error => { //超时之后在这里捕抓错误信息. if (error.response) { console.log('error.response') console.log(error.response); } else if (error.request) { console.log(error.request) console.log('error.request') if(error.request.readyState == 4 && error.request.status == 0){ //我在这里重新请求 } } else { console.log('Error', error.message); } console.log(error.config); });
After timeout, Uncaught (in promise) Error: timeout of xxx ms exceeded error is reported.
In catch, it returns an error.request error, so the retry function is done here. After testing, the re-request function can be realized. Although it can It implements the function of re-requesting after timeout, but it is very troublesome. It requires setting the re-request in every page that requests the API.
Looking at the above, my project has dozens of .vue files. If every page has to set the timeout and re-request function, then I will go crazy.
And this mechanism also has a serious bug, that is, when the requested link fails or cannot be accessed normally due to other reasons, this mechanism fails. It will not wait for the 6 seconds I set, and it will continue to When brushing, dozens of requests per second can easily bring down the server. Please see the picture below. In the blink of an eye, it requests 146 times.
Solution 2 with pitfalls
After studying the source code of axios, after timeout, The error message is caught in axios.interceptors.response in the interceptor, and error.code = "ECONNABORTED", specific link
https://github.com/axios/axios/blob/26b06391f831ef98606ec0ed406d2be1742e9850/lib/ adapters/xhr.js#L95-L101
// Handle timeout request.ontimeout = function handleTimeout() { reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED', request)); // Clean up request request = null; };
So, my solution for global timeout retrieval is like this.
axios.interceptors.response.use(function(response){ .... }, function(error){ var originalRequest = error.config; if(error.code == 'ECONNABORTED' && error.message.indexOf('timeout')!=-1 && !originalRequest._retry){ originalRequest._retry = true return axios.request(originalRequest); } });
This method can also implement new requests, but there are two problems. 1. It only re-requests once. If it times out again, it will It just stopped and I won’t ask again. The second problem is that I do many operations on each page with data requests, such as operations after this.$axios.get(url).then
.
Perfect solution
In AOP programming, what I need is a global function that re-requests with timeout, to be in axios.Interceptors After working hard, I looked for some solutions from others in the axios issue on github, and finally found a perfect solution, which is the one below.
https://github.com/axios/axios/issues/164#issuecomment-327837467
//在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) { var config = err.config; // If config does not exist or the retry option is not set, reject if(!config || !config.retry) return Promise.reject(err); // Set the variable for keeping track of the retry count config.__retryCount = config.__retryCount || 0; // Check if we've maxed out the total number of retries if(config.__retryCount >= config.retry) { // Reject with the error return Promise.reject(err); } // Increase the retry count config.__retryCount += 1; // Create new promise to handle exponential backoff var backoff = new Promise(function(resolve) { setTimeout(function() { resolve(); }, config.retryDelay || 1); }); // Return the promise in which recalls axios to retry the request return backoff.then(function() { return axios(config); }); });
The other dozens The get and post methods of this.$axios
in the .vue page do not need to modify their code at all.
During this process, thank you jooger for providing a lot of technical support. This is his personal information https://github.com/jo0ger, thank you.
The following is an experiment I did. . Set axios.defaults.retryDelay = 500, request www.facebook.com
If you have better suggestions, please tell me, thank you.
Supplement:
Basic usage of axios
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。
首先就是引入axios,如果你使用es6,只需要安装axios模块之后
import axios from 'axios'; //安装方法 npm install axios //或 bower install axios
当然也可以用script引入
axios提供了一下几种请求方式
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项
//config import Qs from 'qs' { //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url url: '/user', // 请求方法同上 method: 'get', // default // 基础url前缀 baseURL: 'https://some-domain.com/api/', transformRequest: [function (data) { // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) data = Qs.stringify({}); return data; }], transformResponse: [function (data) { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter参数 params: { ID: 12345 }, //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错 data: { firstName: 'Fred' }, //设置超时时间 timeout: 1000, //返回数据类型 responseType: 'json', // default }
有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用
axios.post(url,{},config) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) //axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。 //下面是关于同时发起多个请求时的处理 axios.all([get1(), get2()]) .then(axios.spread(function (res1, res2) { // 只有两个请求都完成才会成功,否则会被catch捕获 }));
最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //当然还可以这么配置 var instance = axios.create({ baseURL: 'https://api.example.com' });
本文只是介绍基本的用法,详细看官方文档https://github.com/axios
我写的两个例子:
使用vue2.0+mintUI+axios+vue-router: https://github.com/Stevenzwzhai/vue-mobile-application
使用vue2.0+elementUI+axios+vue-router: https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter, 之前由于没做后端接口,所以运行没数据,现在加了mockjs来返回一些数据,以便于参考。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
The above is the detailed content of How to deal with vue axios request timeout problem. For more information, please follow other related articles on the PHP Chinese website!