vue axios 怎么停止上一次的请求？

Question

现在是左侧是一个部门管理的树，根据用户点击的部门返回这个部门的数据，但是数据太大返回太慢，如果用户快速点击树的话会造成很多次请求，然而这些请求数据的有可能后点击比上一步点击的数据回的快，而造成数据错乱被覆盖，该怎么优化呢

Answer 1

import axios from 'axios'
let axiosSource = axios.CancelToken.source()

// 发送请求
axios.get(url, { cancelToken: axiosSource.token })
axios.post(url, params, { cancelToken: axiosSource.token })

// 取消所有使用axiosSource.token的请求，这些请求Promise会走reject，即可以catch到错误。
axiosSource.cancel('取消请求')

Answer 2

最简单的方式：加 loading

Answer 3

可以在axios中统一配置拦截过快的请求，在下面的示例代码中添加你用来判断请求过快的代码即可：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

建议多看看axios的官方文档，里面有很多场景的使用示例

Answer 4

三种方式：

1. Axios v0.15 版本已经支持取消操作
2. 不要连续发送多个请求（阻止用户操作，或设置loading状态），在第一个请求返回结果前，不再发送新的请求
3. 添加一个全局 timestamp 或 count 变量，只有最后一个请求返回的结果才会被执行：

class Test {
  constructor () {
    this.count = 0
  }
  request () {
    var count = ++this.count
    axios.post(url).then(function () {
      if (count === this.count) {
        // do something
      }
    })
  }
}

Answer 5

1. 取消请求，很多ajax封装件都支持
2. 防抖了解一下
3. loading结合一下