Vue axiosリクエストが頻繁な場合に前回のリクエストをキャンセル

914 ワード

≪ビジネス・シーン|Business Scene|emdw≫:複数のリクエストが連続して送信され、非同期では最後に得られた結果が表示されずに問題が発生します.vueのCancelTokenを使用して前回のリクエストをキャンセルします

import axios from 'axios'
import qs from 'qs'
export default {
  methods: {
    getInfo() {
      var that = this;
      //        
      this.cancelRequest()
      this.$axios.post('    ', '    ',{
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        },
        cancelToken: new axios.CancelToken(function executor(c) {
          that.source = c;
        })
      }).then(
        (res) => {
          
        },
      ).catch((err) => {
        if (axios.isCancel(err)) {
          console.log('Rquest canceled', err.message); //       ,        message
        } else {
          //handle error
          console.log(err);
        }
      })
    }
  }
}