const { CancelToken, isCanCel } = axios;
const source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(thrown => {
  if (isCancel(thrown)) {
    // 獲取 取消請(qǐng)求 的相關(guān)信息
    console.log('Request canceled', thrown.message);
  } else {
    // 處理其他異常
  }
});
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
// 取消請(qǐng)求。參數(shù)是可選的，參數(shù)傳遞一個(gè)取消請(qǐng)求的相關(guān)信息，在 catch 鉤子函數(shù)里能獲取到
source.cancel('Operation canceled by the user.');

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // 參數(shù) c 也是個(gè)函數(shù)
    cancel = c;
  })
});
// 取消請(qǐng)求，參數(shù)用法同上
cancel();

import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 創(chuàng)建一個(gè) axios 實(shí)例，并改變默認(rèn)配置
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})
// 請(qǐng)求攔截
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      // 讓每個(gè)請(qǐng)求攜帶token-- ['X-Token']為自定義key 請(qǐng)根據(jù)實(shí)際情況自行修改
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)
// 響應(yīng)攔截
service.interceptors.response.use(
  response => response,
  error => {
    alert(error)
    return Promise.reject(error)
  }
)
export default service

// api.js
import request from 'request'
export function getUsers(page, options) {
  return request({
    url: 'api/users',
    params: {
      page
    },
    ...options
  })
}

// User.vue
import { CancelToken, isCancel } from 'axios'
import { getUsers } from 'api'
...
cancel: null
...
toCancel() {
  this.cancel('取消請(qǐng)求')
}
getUsers(1,
  {
    cancelToken:  new CancelToken(c => (this.cancel = c))
  }
)
.then(...)
.catch(err => {
  if (isCancel) {
    console.log(err.message)
  } else {
    ...
  }
})

// User.vue
import { CancelToken, isCancel } from 'axios'
import { getUsers } from 'api'
...
cancel: []
...
toCancel() {
  while (this.cancel.length > 0) {
    this.cancel.pop()('取消請(qǐng)求')
  }
}
getUser1(1,
  {
    cancelToken:  new CancelToken(c1 => (this.cancel.push(c1)))
  }
)
getUser2(2,
 {
  cancelTokem: new CancleTokem(c2 => (this.cancel.push(c2)))
 }
)

http.interceptors.request.use(config => {
    config.cancelToken = store.source.token
    return config
}, err => {
    return Promise.reject(err)
})
router.beforeEach((to, from, next) => {
    const CancelToken = axios.CancelToken
    store.source.cancel && store.source.cancel()
    store.source = CancelToken.source()
    next()
})
// 全局變量
store = {
    source: {
        token: null,
        cancel: null
  }
}

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/get?name=xmz', {
    cancelToken : source.token
}).then((response)=>{
    console.log('response', response)
}).catch((error)=>{
    if(axios.isCancel(error)){
        console.log('取消請(qǐng)求傳遞的消息', error.message)
    }else{
        console.log('error', error)
    }
})
// 取消請(qǐng)求
source.cancel('取消請(qǐng)求傳遞這條消息');

axios.CancelToken = require('./cancel/CancelToken');

CancelToken.source = function(){
    var cancel;
    var token = new CancelToken(function executor(c) {
        cancel = c
    })
    return {
        token : token,
        cancel : cancel
    }
}

function CancelToken (executor){
    // ...
    // 判斷executor是一個(gè)函數(shù)，不然就報(bào)錯(cuò)
    var resolvePromise;
    this.promise = new Promise(function(resolve){
        resolvePromise = resolve;
    })
    var token = this;
    // 以上token現(xiàn)在有一個(gè)promise屬性，是一個(gè)未成功的promise對(duì)象；
    executor(function cancel(message){
        if(token.reason){
            return;
        }
        token.reason = new Cancel(message);
        resolvePromise(token.reason);
    })
    // 這個(gè)cancel函數(shù)就是 上面函數(shù)中的cancel，也就是source.cancel；
}

function Cancel(message){
    this.message = message
}

// 在發(fā)送請(qǐng)求之前，驗(yàn)證了cancelToken，看來(lái)此處就是用來(lái)取消請(qǐng)求的；
if(config.cancelToken){
    // 具體是如何取消的，是在這個(gè)判斷內(nèi)定義的；
    config.cancelToken.promise.then(function(cancel){
        request.abort();
        reject(cancel);
        request = null;
    })
}
// 發(fā)送請(qǐng)求
request.send(requestData);