const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // 必須對(duì)請(qǐng)求進(jìn)行cancelToken設(shè)置
  cancelToken: source.token
}).catch(function (thrown) {
  // 如果請(qǐng)求被取消則進(jìn)入該方法判斷
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 取消上面的請(qǐng)求
// source.cancel('messge') message為可選項(xiàng)，必須為String
source.cancel('Operation canceled by the user.');

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  // 在options中直接創(chuàng)建一個(gè)cancelToken對(duì)象
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 取消上面的請(qǐng)求
cancel();

// 正在進(jìn)行中的請(qǐng)求列表
let reqList = []

/**
 * 阻止重復(fù)請(qǐng)求
 * @param {array} reqList - 請(qǐng)求緩存列表
 * @param {string} url - 當(dāng)前請(qǐng)求地址
 * @param {function} cancel - 請(qǐng)求中斷函數(shù)
 * @param {string} errorMessage - 請(qǐng)求中斷時(shí)需要顯示的錯(cuò)誤信息
 */
const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
  const errorMsg = errorMessage || ''
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      cancel(errorMsg)
      return
    }
  }
  reqList.push(url)
}

/**
 * 允許某個(gè)請(qǐng)求可以繼續(xù)進(jìn)行
 * @param {array} reqList 全部請(qǐng)求列表
 * @param {string} url 請(qǐng)求地址
 */
const allowRequest = function (reqList, url) {
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      reqList.splice(i, 1)
      break
    }
  }
}

const service = axios.create()

// 請(qǐng)求攔截器
service.interceptors.request.use(
  config => {
 let cancel
   // 設(shè)置cancelToken對(duì)象
    config.cancelToken = new axios.CancelToken(function(c) {
     cancel = c
    })
    // 阻止重復(fù)請(qǐng)求。當(dāng)上個(gè)請(qǐng)求未完成時(shí)，相同的請(qǐng)求不會(huì)進(jìn)行
    stopRepeatRequest(reqList, config.url, cancel, `${config.url} 請(qǐng)求被中斷`)
    return config
  },
  err => Promise.reject(err)
)

// 響應(yīng)攔截器
service.interceptors.response.use(
  response => {
    // 增加延遲，相同請(qǐng)求不得在短時(shí)間內(nèi)重復(fù)發(fā)送
    setTimeout(() => {
      allowRequest(reqList, response.config.url)
    }, 1000)
    // ...請(qǐng)求成功后的后續(xù)操作
    // successHandler(response)
  },
  error => {
    if (axios.isCancel(thrown)) {
      console.log(thrown.message);
    } else {
      // 增加延遲，相同請(qǐng)求不得在短時(shí)間內(nèi)重復(fù)發(fā)送
      setTimeout(() => {
        allowRequest(reqList, error.config.url)
      }, 1000)
    }
    // ...請(qǐng)求失敗后的后續(xù)操作
    // errorHandler(error)
  }
)