axios取消請求與避免重復請求

目錄

起源

某個(gè)頁(yè)面需要下載全部數據的功能，下載數據量大，接口延遲長(cháng).....

某個(gè)頁(yè)面加載初始數據量延長(cháng)長(cháng)，但單個(gè)檢索快速，出現初始數據加載中時(shí)，檢索接口返回，初始數據后續返回覆蓋了檢索數據的展示....

這些情況需要我們：

• 能夠手動(dòng)取消/終止請求Request。
• 某些頁(yè)面接口同時(shí)只能有一個(gè)在請求。

現狀

系統基于老哥花褲衩開(kāi)源的vue-element-admin做的二次開(kāi)發(fā)，其中的請求采用的是axios，其中封裝的request.js關(guān)鍵代碼如下所示：

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 500000, // request timeout
  transformRequest: [function(data) {
    // 對 data 進(jìn)行任意轉換處理
    return Qs.stringify({
      ...data
    },
    // 數組的轉換
    { arrayFormat: 'brackets' })
  }]
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

發(fā)起請求的方法：

export function remoteApi(data) {
  return request({
    url: '/api',
    method: 'post',
    data
  })
}

取消請求 cancelToken

其官方文檔：:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 處理錯誤
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');

修改后的請求方法

export function remoteApi(data, cancelToken) {
  return request({
    url: '/api',
    method: 'post',
    cancelToken,
    data
  })
}

實(shí)際請求時(shí)，創(chuàng )建cacelToken：

// 組件方法內
this.cancelToken = CancelToken.source()
remoreApi(data, this.cancelToken).then(....).catch(....).finally(....)

需要取消請求時(shí)，執行：

// 組件方法內
this.cancelToken.cancel('取消下載')

避免重復請求

避免一個(gè)接口的重復請求，以免延時(shí)長(cháng)的接口返回數據覆蓋另一個(gè)接口的返回數據，造成數據顯示錯誤。思路也相對簡(jiǎn)單，使用一個(gè)全局Map存儲請求標識與對應的cancelToken。請求，在發(fā)起請求前，按照請求標識，喚起對應cancelToken的cancel方法，然后再發(fā)出新請求，即可滿(mǎn)足條件。

總結

到此這篇關(guān)于axios取消請求與避免重復請求的文章就介紹到這了,更多相關(guān)axios取消請求內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！