快捷導(dǎo)航

axios取消請(qǐng)求與避免重復(fù)請(qǐng)求

更新時(shí)間：2021年06月22日 10:41:44 作者：KevinQ

在項(xiàng)目中經(jīng)常有一些場(chǎng)景會(huì)連續(xù)發(fā)送多個(gè)請(qǐng)求,而異步會(huì)導(dǎo)致最后得到的結(jié)果不是我們想要的,并且對(duì)性能也有非常大的影響,這篇文章主要給大家介紹了關(guān)于axios取消請(qǐng)求與避免重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下

起源

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

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

這些情況需要我們：

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

現(xiàn)狀

系統(tǒng)基于老哥花褲衩開源的vue-element-admin做的二次開發(fā)，其中的請(qǐng)求采用的是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) {
    // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理
    return Qs.stringify({
      ...data
    },
    // 數(shù)組的轉(zhuǎn)換
    { 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ā)起請(qǐng)求的方法：

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

取消請(qǐng)求 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 {
     // 處理錯(cuò)誤
  }
});

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

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

修改后的請(qǐng)求方法

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

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

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

需要取消請(qǐng)求時(shí)，執(zhí)行：

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

避免重復(fù)請(qǐng)求

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