首頁 web前端 js教程 怎樣快速解決vue axios請求超時

怎樣快速解決vue axios請求超時

May 02, 2018 pm 02:43 PM
axios 解決 請求

這次帶給大家怎樣快速解決vue axios請求超時,解決vue axios請求超時的注意事項有哪些,下面就是實戰案例,一起來看一下。

具體原因

最近公司在做一個專案, 服務端資料介面用的是Php輸出的API, 有時候在呼叫的過程中會失敗, 在谷歌瀏覽器裡邊顯示Provisional headers are shown。

按照搜尋引擎給出來的解決方案,解決不了我的問題.

最近在研究AOP這個開發程式設計的概念,axios開發說明裡邊提到的欄位器(axios.Interceptors)應該是這個機制,降低程式碼耦合度,提高程式的可重複使用性,同時提高了開發的效率。

帶坑的解決方案一

我的經驗有限,覺得唯一能做的,就是axios請求超時之後做一個重新請求。透過研究axios的使用說明,為它設定一個timeout = 6000

axios.defaults.timeout = 6000;
登入後複製

然後加一個欄位截取器.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
 // Do something before request is sent
 return config;
 }, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
 // Do something with response data
 return response;
 }, function (error) {
 // Do something with response error
 return Promise.reject(error);
});
登入後複製

這個欄位器作用是如果在請求逾時之後,欄位截器可以捕抓到訊息,然後再進行下一步操作,也就是我想要用重新請求。

這裡是相關的頁面資料請求。

this.$axios.get(url, {params:{load:'noload'}}).then(function (response) {
	//dosomething();
}).catch(error => {
	//超时之后在这里捕抓错误信息.
	if (error.response) {
		console.log('error.response')
		console.log(error.response);
	} else if (error.request) {
		console.log(error.request)
		console.log('error.request')
		if(error.request.readyState == 4 && error.request.status == 0){
			//我在这里重新请求
		}
	} else {
		console.log('Error', error.message);
	}
	console.log(error.config);
});
登入後複製

逾時之後, 報出 Uncaught (in promise) Error: timeout of xxx ms exceeded的錯誤。

在catch那裡,它回傳的是error.request錯誤,所以就在這裡做retry的功能, 經過測試是可以實現重新請求的功功能, 雖然能夠實現超時重新請求的功能,但很麻煩,需要每一個請API的頁面裡邊要設定重新請求。

看上面,我這個專案有幾十個.vue 文件,如果每個頁面都要去設定超時重新請求的功能,那我要瘋掉的.

而且這個機制還有一個嚴重的bug,就是被要求的連結失效或其他原因造成無法正常存取的時候,這個機制失效了,它不會等待我設定的6秒,而且一直在刷,一秒種請求幾十次,很容易就把伺服器搞垮了,請看下圖, 一眨眼的功能,它就請求了146次。

 

帶坑的解二

#研究了axios的原始碼,逾時後, 會在攔截器那裡axios.interceptors.response 捕抓到錯誤訊息, 且error.code = "ECONNABORTED",具體連結

 https://github.com/axios/axios/blob/26b06391f831ef98606ec0ed406d2be174 adapters/xhr.js#L95-L101

// Handle timeout
 request.ontimeout = function handleTimeout() {
  reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
  request));
  // Clean up request
  request = null;
 };
登入後複製

所以,我的全域逾時重新取得的解決方案這樣的。

axios.interceptors.response.use(function(response){
....
}, function(error){
	var originalRequest = error.config;
	if(error.code == 'ECONNABORTED' && error.message.indexOf('timeout')!=-1 && !originalRequest._retry){
			originalRequest._retry = true
			return axios.request(originalRequest);
	}
});
登入後複製

這個方法,也可以實現得新請求,但有兩個問題,1是它只重新請求1次,如果再超時的話,它就停止了,不會再請求。第2個問題是,我在每個有資料請求的頁面那裡,做了許多操作,例如 this.$axios.get(url).then之後操作。

完美的解決方法

以AOP程式設計方式,我需要的是一個超時重新請求的全域功能, 要在axios.Interceptors下功夫,在github的axios的issue找了別人的一些解決方法,終於找到了一個完美解決方案,就是下面這個。

 https://github.com/axios/axios/issues/164#issuecomment-327837467 

//在main.js设置全局的请求次数,请求的间隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
 var config = err.config;
 // If config does not exist or the retry option is not set, reject
 if(!config || !config.retry) return Promise.reject(err);
 // Set the variable for keeping track of the retry count
 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);
 });
});
登入後複製

其他的那個幾十個.vue頁面的 this.$axios的get 和post 的方法根本就不需要去修改它們的程式碼。

在這個過程中,謝謝jooger給予大量的技術支持,這是他的個人資訊  https://github.com/jo0ger  , 謝謝。

以下是我做的一个试验。。把axios.defaults.retryDelay = 500, 请求 www.facebook.com

如有更好的建议,请告诉我,谢谢。

补充:

axios基本用法

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios
登入後複製

当然也可以用script引入

axios提供了一下几种请求方式

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
登入後複製

这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项

//config
import Qs from 'qs'
{
 //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
 url: '/user',
 // 请求方法同上
 method: 'get', // default
 // 基础url前缀
 baseURL: 'https://some-domain.com/api/',
  
    
 transformRequest: [function (data) {
  // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)
  data = Qs.stringify({});
  return data;
 }],
 transformResponse: [function (data) {
  // 这里提前处理返回的数据
  return data;
 }],
 // 请求头信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},
 //parameter参数
 params: {
  ID: 12345
 },
 //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
 data: {
  firstName: 'Fred'
 },
 //设置超时时间
 timeout: 1000,
 //返回数据类型
 responseType: 'json', // default
}
登入後複製

有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用

axios.post(url,{},config)
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。
//下面是关于同时发起多个请求时的处理
axios.all([get1(), get2()])
 .then(axios.spread(function (res1, res2) {
  // 只有两个请求都完成才会成功,否则会被catch捕获
 }));
登入後複製

最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//当然还可以这么配置
var instance = axios.create({
 baseURL: 'https://api.example.com'
});
登入後複製

本文只是介绍基本的用法,详细看官方文档https://github.com/axios

我写的两个例子:

使用vue2.0+mintUI+axios+vue-router: https://github.com/Stevenzwzhai/vue-mobile-application

使用vue2.0+elementUI+axios+vue-router: https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter, 之前由于没做后端接口,所以运行没数据,现在加了mockjs来返回一些数据,以便于参考。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

webpack中dev-server使用步骤详解

Angular2中如何使用Dom

以上是怎樣快速解決vue axios請求超時的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1653
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1251
29
C# 教程
1224
24
Win11系統無法安裝中文語言套件的解決方法 Win11系統無法安裝中文語言套件的解決方法 Mar 09, 2024 am 09:48 AM

Win11系統無法安裝中文語言包的解決方法隨著Windows11系統的推出,許多用戶開始升級他們的作業系統以體驗新的功能和介面。然而,一些用戶在升級後發現他們無法安裝中文語言包,這給他們的使用體驗帶來了困擾。在本文中,我們將探討Win11系統無法安裝中文語言套件的原因,並提供一些解決方法,幫助使用者解決這個問題。原因分析首先,讓我們來分析一下Win11系統無法

如何解決Steam錯誤代碼118 如何解決Steam錯誤代碼118 Feb 19, 2024 pm 05:56 PM

Steam是一個全球知名的遊戲平台,讓用戶能夠購買、下載和玩遊戲。然而,有時使用者在使用Steam時可能會遇到一些問題,例如錯誤代碼118。在本文中,我們將探討這個問題以及如何解決。首先,讓我們來了解一下錯誤代碼118是什麼意思。當您在嘗試登入Steam時出現錯誤代碼118,這表示您的電腦無法連線到Steam伺服器。這可能是由於網路問題、防火牆設定、代理設定或

解決steam錯誤代碼E20的方法 解決steam錯誤代碼E20的方法 Feb 19, 2024 pm 09:17 PM

在使用Steam進行遊戲下載、更新或安裝時,經常會遇到各種錯誤代碼。其中,常見的一個錯誤代碼是E20。這個錯誤代碼通常意味著Steam客戶端在嘗試進行遊戲更新時遇到問題。不過,幸運的是,要解決這個問題並不難。首先,我們可以嘗試下面幾種解決方案來修復錯誤代碼E20。1.重啟Steam客戶端:有時候,直接重新啟動Steam客戶端就可以解決這個問題。在Steam窗口

五招教你解決黑鯊手機開不了機的問題! 五招教你解決黑鯊手機開不了機的問題! Mar 24, 2024 pm 12:27 PM

隨著智慧型手機技術的不斷發展,手機在我們日常生活中扮演著越來越重要的角色。而作為一款專注於遊戲效能的旗艦手機,黑鯊手機備受玩家青睞。然而,有時候我們也會面臨到黑鯊手機開不了機的情況,這時候我們就需要採取一些措施來解決這個問題。接下來,就讓我們來分享五招教你解決黑鯊手機開不了機的問題:第一招:檢查電池電量首先,確保你的黑鯊手機有足夠的電量。可能是因為手機電量耗盡

小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? 小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? Mar 22, 2024 am 08:06 AM

隨著社群媒體的不斷發展,小紅書已經成為越來越多年輕人分享生活、發現美好事物的平台。許多用戶在發布圖片時遇到了自動儲存的問題,這讓他們感到十分困擾。那麼,如何解決這個問題呢?一、小紅書發布自動儲存圖片怎麼解決? 1.清除快取首先,我們可以嘗試清除小紅書的快取資料。步驟如下:(1)開啟小紅書,點選右下角的「我的」按鈕;(2)在個人中心頁面,找到「設定」並點選;(3)向下捲動,找到「清除快取」選項,點擊確認。清除快取後,重新進入小紅書,嘗試發布圖片看是否解決了自動儲存的問題。 2.更新小紅書版本確保你的小

無法在此裝置上載入驅動程式怎麼解決? (親測有效) 無法在此裝置上載入驅動程式怎麼解決? (親測有效) Mar 14, 2024 pm 09:00 PM

  大家都知道,如果電腦無法載入驅動程序,該設備可能就無法正常工作或與電腦進行正確的互動。那在電腦上彈出無法在此裝置上載入驅動程式的提示框,我們要如何解決呢?下面小編就教大家兩招輕鬆解決問題。  無法在此裝置上載入驅動程式解決方法  1、開始功能表搜尋「核心隔離」。  2、將記憶體完整性關閉,上方提示「記憶體完整性已關閉。你的裝置可能易受攻擊。」點擊後方忽略即可,不會對使用有影響。  3.重啟機器之後即可解決問題。

Linux中文亂碼怎麼解決 Linux中文亂碼怎麼解決 Feb 21, 2024 am 10:48 AM

Linux中文亂碼問題是使用中文字元集和編碼時常見的一個問題。出現亂碼的原因可能是檔案編碼設定不正確,系統語言環境未安裝或未設置,以及終端顯示設定錯誤等。本文將介紹幾種常見的解決方法,並提供具體的程式碼範例。一、檢查檔案編碼設定使用file指令查看檔案編碼在終端機中使用file指令,可以檢視檔案的編碼:file-ifilename如果輸出中有"charset

解決PyCharm無法開啟的方法分享 解決PyCharm無法開啟的方法分享 Feb 22, 2024 am 09:03 AM

標題:如何解決PyCharm無法開啟的問題PyCharm是一款功能強大的Python整合開發環境,但有時候我們可能會遇到無法開啟PyCharm的問題。在本文中,我們將分享一些常見的解決方法,並提供具體的程式碼範例。希望能幫助遇到這個問題的朋友們。方法一:清除快取有時候PyCharm的快取檔案可能會導致程式無法正常打開,我們可以嘗試清除快取來解決這個問題。具

See all articles