axiosは（CancelTokenを使用して）要求をキャンセル

小物

通常の開発プロセスでは、我々は多くの場合、メニューの切り替えに問題が発生した、と低いスイッチング周波数、別のページに切り替え、ページ基本的にノー非同期リクエスト優れたいくつかのケースでは、もしあれば、いくつかのケースでは、それはごくわずかです。しかし、我々はこれらの未処理の要求に対処していない場合は、いくつかの高いスイッチング周波数ページの要求の後、これらの性能は大幅にページ要求に影響を与え、さらにはタイムアウトにつながります。

あなたは、AJAXリクエストJavascriptを切断する必要がある場合は、1時間を設定することである、残業自動的に切断し、他の我々は、XMLHttpRequestオブジェクトのメソッドを中止呼び出すことができます。

httpリクエストを開始するために、主にaxiosを使用して、Vueのを使用するプロセスでは、我々はhttpリクエストを中止する方法をaxios？彼自身の手や衣服 - 無駄にオンラインチュートリアルを検索した後、私は有名な革命的な前任者を考えます。まあ、私はその後、我々は彼らの英語の文書を見ている、英語力を示したいと思います。オープンaxiosのgithubのページには、ドキュメントは本当に私たちはすぐに問題の解決策を見つける良いヘルパーです。

あなたは、キャンセルトークンを使用して要求をキャンセルすることができます。
axiosは、トークンAPIが取り下げ解約約束の提案に基づいてキャンセル。
あなたは、以下に示すようCancelToken.sourceファクトリを使用してトークンキャンセルを作成することができます。

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.');

CancelTokenを使用することにより開始さaxios文書を探す、見つけることができます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 => {
  })