axios中取消請求（使用CancelToken）

axios中取消請求（使用CancelToken）

小文章

在平時的開發過程中，我們會經常遇到菜單切換的問題，在一些切換頻率較低的情況下，在切換到另一個頁面的時候，上一個頁面基本沒有未完成的異步請求，即時有，在一些情況下也是可以忽略的。但是，在一些切換頻率較高的頁面中，如果我們不處理這些未完成的請求，那么這些請求會極大的影響頁面的性能，甚至導致之后的請求超時。

如果需要斷開Javascript的ajax請求，一種是通過設置時間，超時自動斷開，另一種我們可以調用XMLHttpRequest對象上的abort方法。

在使用Vue的過程中，大多是使用axios來發起http請求，那么在axios中我們要怎么中止某個http請求呢？遍尋網上教程無果后，想起了革命先輩的名言–自己動手，豐衣足食。好了，我要秀英語水平了，那么我們只好自己看英文文檔了。打開axios的github主頁，果然文檔才是我們的好幫手，很快就找到解決問題的辦法。

You can cancel a request using a cancel token.
The axios cancel token API is based on the withdrawn cancelable promises proposal.
You can create a cancel token using the CancelToken.source factory as shown below:

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

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

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

查找axios的文檔，發現可以通過使用CancelToken來取消axios發起的請求，我們可以自己寫一段代碼來驗證。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Axios!',
    source: null
  },
  methods: {
    sendRequest() {
      this.source = this.axios.CancelToken.source(); // 這里初始化source對象
      this.axios.get(url, {
        cancelToken: this.source.token // 這里聲明的cancelToken其實相當於是一個標記，
                                       // 當我們要取消請求的時候，可以通過這個找到該請求
      })
      .then(res => {
        // 你的邏輯
      })
      .catch(res => {
        // 如果調用了cancel方法，那么這里的res就是cancel傳入的信息
        // 你的邏輯
      })
    },
    cancel() {
      this.source.cancel('這里你可以輸出一些信息，可以在catch中拿到')
    }
  }
})

實際使用參考

this.$http
  .post(
    ...TaobaoService.purchaseOrderExport(this.searchForm, this.sortField).concat({
      cancelToken: new this.$http.CancelToken(function (cancel) {
        // userDeleteCancel = cancel
      })
    })
  )
  .then(response => {
    this.selectedArr = []
    this.queryData()
    this.$Message.success('已加入任務列表')
  })
  .catch(thrown => {
  })