在做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超時的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。