在vue中axios设置timeout超时的操作

在做vue项目的时候，由于数据量查询比较大，所以前台调用接口数据的时候，往往要等很久，所以需要设置个超时，当超过设置时间就让向页面返回一个状态，让使用者不用一直等。

通过官网api查询，对其超时讲解不是很多，但其和Jquery中请求非常类似

Jquery请求方式

$.ajax({ url: ’接口地址’, type:’get’, //请求方式get或post data:{}, //请求所传的参数 dataType: ’json’, //返回的数据格式 timeout: 4000, //设置时间超时，单位毫秒 success: function(result) { console.log(’OK’) }, error: console.log(’error’) })

vue中请求方式：

axios.post( //请求方式url, //接口地址params, //传递参数{timeout: 1000 * 60 * 2}) //设置超时，单位毫秒.then(function(res){ console.log(res);}).catch((error) => { console.log(’error’)})

所以可以再请求中通过timeout设置请求超时

补充知识：vue中用axios请求接口，处理网络失败和网络超时问题,axios拦截器

前端经常要对服务器的错误信息做处理，小编是头一次做，就遇到了很多问题

首先，是封装的请求数据的方法

import Vue from ’vue’;import axios from ’axios’;import qs from ’qs’;import wx from ’weixin-js-sdk’;import { Toast} from ’mint-ui’;axios.defaults.timeout = 10000;// 拦截axios.interceptors.request.use(function (config) { return config}, function (error) { return Promise.reject(error);})axios.interceptors.response.use( response => { if (typeof(response) != ’String’&&response.data.errno !== 0 && response.config.url.indexOf(’searchorderoyidornumber’) < 0 && response.config.url.indexOf(’upload’) < 0) { response.data[’data’] = response.data[’data’] || {}; Toast(response.data.errmsg) } if (typeof(response) != ’String’&&response.data.errno == 3521) { localStorage.clear(); location.href = ’#/login’ } return response.status == 200 ? response.data : response; // return response }, error => { //String(error).toLowerCase().indexOf(’timeout’) if (error && error.stack.indexOf(’timeout’) > -1) { Toast(’请求超时’) } // let config = error.config; // if (!config || !config.retry) return Promise.reject(err); // 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); // }); });let axios_post = function (url, params) { return new Promise((resolve, reject) => { if (!localStorage.getItem(’token’) || localStorage.getItem(’token’) == ’’) { axios.get(’/gettoken’).then((res) => { localStorage.setItem(’token’, res.data.token) axios.post(url, qs.stringify(params), { headers: { ’Content-Type’: ’application/x-www-form-urlencoded’ } }).then(res => { resolve(res) }).catch(err => { reject(err) }) }).catch(err => { reject(err) }) } else { params = url.indexOf(’login’) > -1 ? { ...params, _token: localStorage.getItem(’token’) } : { ...params, _token: localStorage.getItem(’token’), S: localStorage.getItem(’S’), U: localStorage.getItem(’U’) } let options = {}; options[’maxContentLength’] = 1024000000; if(url.indexOf(’uplpoad’) > -1){ options[’timeout’] = 1000 * 30; } axios.post(url, params, options).then(res => { resolve(res) }).catch(err => { reject(err) }) } })}let axios_get = function (url, params) { let _params = typeof (params) == ’object’ ? params : {} _params = { ..._params, S: localStorage.getItem(’S’), U: localStorage.getItem(’U’) } return new Promise((resolve, reject) => { axios.get(url, { ’params’: _params }).then(res => { if (res.errno !== 0) { reject(res) } resolve(res) }).catch(err => { reject(err) }) })}let getCookie = function(cookieName) { var cookieValue = ''; if (document.cookie && document.cookie != ’’) { var cookies = decodeURIComponent(document.cookie).split(’;’); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); // if (cookie.substring(0, cookieName.length + 1).trim() == cookieName.trim() + '=') { // cookieValue = cookie.substring(cookieName.length + 1, cookie.length); // break; // } var cookie = cookies[i].trim(); var cookieArr = cookie.split(’=’); if(cookieArr[0] == cookieName.trim()){ cookieValue = cookieArr[1]; break; } } } return cookieValue;}let setCookie = function(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + '='+ escape (value) + ';expires=' + exp.toGMTString(); } Vue.prototype.$http = axios;Vue.prototype.$get = axios_get;Vue.prototype.$post = axios_post;Vue.prototype.$getCookie = getCookie;Vue.prototype.$setCookie = setCookie;

在组件中直接this.$post()这样用即可。

以上这篇在vue中axios设置timeout超时的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。