Vue axios请求频繁时取消上一次请求

业务场景:会连续发送多个请求,而异步会导致最后得到的结果回显会有问题。我们使用vue的CancelToken取消上一次的请求
<script>
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);
        }
      })
    }
  }
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容