axios:"timeout?of?5000ms?exceeded"超時問題如何解決

這篇文章主要介紹“axios:"timeout of 5000ms exceeded"超時問題如何解決”，在日常操作中，相信很多人在axios:"timeout of 5000ms exceeded"超時問題如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”axios:"timeout of 5000ms exceeded"超時問題如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

axios:"timeout of 5000ms exceeded"超時

最近遇到一個問題，在我開機后，啟動后臺服務器登錄程序時會報請求超時的問題。網上找了下解決方法，最后成功解決。

首先，我們要查看自己的請求地址是否正確，后端是否正常開啟，數據庫是否啟動；若都正確無誤，則繼續往下看。

在看以下代碼時，大家可以參考我的另一篇文章：vue開發中 axios 的封裝

注：我使用的是 0.18.1 版本。

具體代碼如下： 

import axios from 'axios'
import { BASE_URL } from './http'
import router from '../router'
 
// create an axios instance
const service = axios.create({
  baseURL: BASE_URL, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
 
 
// 設置請求次數，請求的間隙
service.defaults.retry = 4;
service.defaults.retryDelay = 1000;
 
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)
 
// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    return res
  },
  error => {
    if (error.response) {
      // console.log('err' + error) // for debug
      switch (error.response.status) {
        case 401:
          // console.log('err status' + error.response.status)
          router.push('/login')
          break
        case 404:
          break
        case 500:
          break
      }
      return Promise.reject(error)
    } else {
      // 處理超時的情況
      let config = error.config
      // If config does not exist or the retry option is not set, reject
      if(!config || !config.retry) return Promise.reject(error)
  
      // 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(error)
      }
  
      // Increase the retry count
      config.__retryCount += 1
  
      // Create new promise to handle exponential backoff
      let 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 service(config)
      })
    }
 
  }
)
 
export default service

當請求超時后，axios 將重新發起請求，請求次數和間隙可以自己設定。

這里我創建了一個 axios 實例，所有 api 接口都通過這個實例進行請求。

如果你不想這樣做，可以像下面這樣寫：

//在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);
    });
});

報錯 Error: timeout of 5000ms exceeded

在確定后端代碼沒有問題，鎖定前端

修改 \src\utils 目錄下的 request.js

修改timeout屬性值

有需要以后再來優化

到此，關于“axios:"timeout of 5000ms exceeded"超時問題如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！