在vue中axios設定timeout超時的操作
阿新 • • 發佈:2020-09-05
在做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,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超時的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。