在做vue項目的時候，由于數據量查詢比較大，所以前臺調用接口數據的時候，往往要等很久，所以需要設置個超時，當超過設置時間就讓向頁面返回一個狀態，讓使用者不用一直等。
通過官網api查詢，對其超時講解不是很多，但其和Jquery中請求非常類似
Jquery請求方式
|
1
2
3
4
5
6
7
8
9
10
11
|
$.ajax({ url: '接口地址', type:'get', //請求方式get或post data:{}, //請求所傳的參數 dataType: 'json', //返回的數據格式 timeout: 4000, //設置時間超時，單位毫秒 success: function(result) { console.log('OK') }, error: console.log('error') }) |
vue中請求方式：
|
1
2
3
4
5
6
7
8
9
|
axios.post( //請求方式url, //接口地址params, //傳遞參數{timeout: 1000 * 60 * 2}) //設置超時，單位毫秒.then(function(res){ console.log(res);}).catch((error) => { console.log('error')}) |
所以可以再請求中通過timeout設置請求超時
補充知識：vue中用axios請求接口，處理網絡失敗和網絡超時問題,axios攔截器
前端經常要對服務器的錯誤信息做處理，小編是頭一次做，就遇到了很多問題
首先，是封裝的請求數據的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
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超時的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_36727756/article/details/93738441
