在做vue項(xiàng)目的時(shí)候，由于數(shù)據(jù)量查詢比較大，所以前臺(tái)調(diào)用接口數(shù)據(jù)的時(shí)候，往往要等很久，所以需要設(shè)置個(gè)超時(shí)，當(dāng)超過(guò)設(shè)置時(shí)間就讓向頁(yè)面返回一個(gè)狀態(tài)，讓使用者不用一直等。

通過(guò)官網(wǎng)api查詢，對(duì)其超時(shí)講解不是很多，但其和Jquery中請(qǐng)求非常類似

Jquery請(qǐng)求方式

$.ajax({ url: ’接口地址’, type:’get’, //請(qǐng)求方式get或post data:{}, //請(qǐng)求所傳的參數(shù) dataType: ’json’, //返回的數(shù)據(jù)格式 timeout: 4000, //設(shè)置時(shí)間超時(shí)，單位毫秒 success: function(result) { console.log(’OK’) }, error: console.log(’error’) })

vue中請(qǐng)求方式：

axios.post( //請(qǐng)求方式url, //接口地址params, //傳遞參數(shù){timeout: 1000 * 60 * 2}) //設(shè)置超時(shí)，單位毫秒.then(function(res){ console.log(res);}).catch((error) => { console.log(’error’)})

所以可以再請(qǐng)求中通過(guò)timeout設(shè)置請(qǐng)求超時(shí)

補(bǔ)充知識(shí)：vue中用axios請(qǐng)求接口，處理網(wǎng)絡(luò)失敗和網(wǎng)絡(luò)超時(shí)問(wèn)題,axios攔截器

前端經(jīng)常要對(duì)服務(wù)器的錯(cuò)誤信息做處理，小編是頭一次做，就遇到了很多問(wèn)題

首先，是封裝的請(qǐng)求數(shù)據(jù)的方法

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(’請(qǐng)求超時(shí)’) } // 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設(shè)置timeout超時(shí)的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。