axios取消快速点击造成的重复请求

axios.CancelToken主要是解决重复请求造成的一系列问题

• 新建service.js

yarn add express -D
 const express = require("express")
const app = new express();
app.get('/user', function(request, response) {
	response.send('hello World')
})
app.listen(5000, function() {
	console.log("Server is running ....")
})
启动： node service.js

• App.vue

 <template>
  <div id="app">
    <h1>axios取消token请求</h1>
    <button @click="getData">请求数据</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data: ()=>({
    cancelReq : null // 初始时没有请求需要取消，设为null
  }),
  methods:{

    getData() {
      //  通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
      var CancelToken = axios.CancelToken;
      let that = this;
      if (typeof that.cancelReq === 'function') {
        that.cancelReq()
      }
      this.$axios.get("user",{
        cancelToken: new CancelToken(function executor(c) {
          // 取消请求操作
          that.cancelReq = c
        })
      }).then(res=>{
        // console.log("res",res)
        console.log("请求数据",res.data)
      }).catch(err=>{
       
      })
    }
  },
  mounted() {
    // this.getData()
  }
}
</script>

<style lang="less">

</style>

展示如下