axios取消请求

axios取消请求

  axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式

1.使用 CancelToken.source 工厂方法创建cancel token

  CancelToken有一个source静态方法，调用之后返回一个对象，该对象包含一个token属性用于标记请求和一个cancel方法用于取消请求

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
     axios.get('http://localhost:3000/axios/4',{
        cancelToken: source.token
      }).then(function(res) {
            console.log(res.data);
          })
    source.cancel('不想请求了');

2.通过传递一个 executor 函数到 CancelToken 的构造函数创建cancel token

  axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里面的方法即可取消多个请求。

    let arr = [];
    const CancelToken = axios.CancelToken;
     axios.get('http://localhost:3000/axios/4',{
        cancelToken: new CancelToken(function executor(c){
            arr.push(c);
            cancel = c;
        })
      }).then(function(res) {
            console.log(res.data);
          })
      axios.get('http://localhost:3000/axios/3',{
        cancelToken: new CancelToken(function executor(c){
            arr.push(c);
            cancel = c;
        })
      }).then(function(res) {
            console.log(res.data);
          })
      for (let i = 0; i < arr.length; i++) {
        arr[i]('请求取消');
      }

  注意点1：
  cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去，这样请求在被取消之后会被catch捕获，你可以在这里将取消原因打印出来或者提示给用户，比如提示用户不要频繁点击发送请求

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
     axios.get('http://localhost:3000/axios/4',{
        cancelToken: source.token
      }).then(function(res) {
            console.log(res.data);
          }).catch(function(err) {
            if (axios.isCancel(err)) {
              console.log(err.message);
            }
          })
      source.cancel('不想请求了');

  注意点2：
  get的cancelToken放置在第二个参数的对象里面，post的cancelToken放置在第三个参数对象里面

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    axios.post('http://localhost:3000/axios',{
                username: 'lisi',
                content: 123
            },{
                headers:{
                    "Content-Type": "application/json"
                 },
                 cancelToken: source.token
               }

               ).then(function(ret){
                console.log(ret.data);
            })
      source.cancel('不想请求了');