在vue中axios設(shè)置timeout超時的操作
在做vue項目的時候,由于數(shù)據(jù)量查詢比較大,所以前臺調(diào)用接口數(shù)據(jù)的時候,往往要等很久,所以需要設(shè)置個超時,當(dāng)超過設(shè)置時間就讓向頁面返回一個狀態(tài),讓使用者不用一直等。
通過官網(wǎng)api查詢,對其超時講解不是很多,但其和Jquery中請求非常類似
Jquery請求方式
$.ajax({
url: '接口地址',
type:'get', //請求方式get或post
data:{}, //請求所傳的參數(shù)
dataType: 'json', //返回的數(shù)據(jù)格式
timeout: 4000, //設(shè)置時間超時,單位毫秒
success: function(result) {
console.log('OK')
},
error: console.log('error')
})
vue中請求方式:
axios.post( //請求方式
url, //接口地址
params, //傳遞參數(shù)
{timeout: 1000 * 60 * 2}) //設(shè)置超時,單位毫秒
.then(function(res){
console.log(res);
}).catch((error) => {
console.log('error')
})
所以可以再請求中通過timeout設(shè)置請求超時
補充知識:vue中用axios請求接口,處理網(wǎng)絡(luò)失敗和網(wǎng)絡(luò)超時問題,axios攔截器
前端經(jīng)常要對服務(wù)器的錯誤信息做處理,小編是頭一次做,就遇到了很多問題
首先,是封裝的請求數(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('請求超時')
}
// 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超時的操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合Axios+v-for列表循環(huán)實現(xiàn)網(wǎng)易健康頁面(實例代碼)
這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實現(xiàn)網(wǎng)易健康頁面,在項目下安裝axios,通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象,以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換,需要的朋友可以參考下2022-08-08
vant組件表單外部的button觸發(fā)form表單的submit事件問題
這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3+echarts5踩坑以及resize方法報錯的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07

