vue axios处理频繁请求

场景一：页面中存在多个按钮（A、B、C……按钮们都可以达到大致相同的目的，A点不动可以试试B，依次类推），每个按钮点击后都会触发请求，假设用户点击按钮A后迟迟未响应，于是很自然地点击按钮B，B收到响应结果后没多久A也收到了（A请求一直pending，从未中断），就会发现原本已经展示B结果的页面忽然闪了一下展示A的结果了，这一定不是我们想要的（早不来晚不来，现在别人给我答案了，你却来了）。

场景二：搜索框一般会有边输入边搜索的功能，在输入的每个阶段，都向后台发送http请求，我们不希望如此频繁，更不希望最后返回的不是用户想要的结果。

解决方法：在util.js中定义一个公用方法request()以及它需要调用的cancelRequest()：

util.js

import axios from 'axios'

const util = {
  // axios请求频繁时取消上一次请求
  request (url, params, handleSuc, handleErr) {
    let that = this
    // let CancelToken = axios.CancelToken
    // let source = CancelToken.source()
    // 取消上一次请求
    this.cancelRequest()
    axios.post(url, params, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      cancelToken: new axios.CancelToken(function executor (c) {
        that.source = c
      })
    }).then((res) => {
      handleSuc(res)
    }).catch((err) => {
      if (axios.isCancel(err)) {
        // 请求如果被取消，这里是返回取消的message
        // console.log('Rquest canceled', err.message)
      } else {
        handleErr(err)
      }
    })
  },
  cancelRequest () {
    if (typeof this.source === 'function') {
      this.source('终止请求')
    }
  }
}

export default util

main.js

import util from '@/util'

// 将util绑定到Vue的原型上
Vue.prototype.$util = util

调用方法：

this.$util.request(url, params, (res) => {
  // 请求成功，执行代码
}, (err) => {
  // 请求失败，执行代码
})