import Axios from "axios";

// 創(chuàng)建一個(gè)實(shí)例
const service = Axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 1000,
});

// 添加請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    // 判斷是否有 token
    if (getToken()) {
      config.headers["Permission-Token"] = getToken();
    }
    // 添加待處理請(qǐng)求
    addPendingRequest(config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    // 移除掛起的請(qǐng)求
    removePendingRequest(response);
    const res = response.data;
    return res;
  },
  (error) => {
    // 移除掛起的請(qǐng)求
    removePendingRequest(error);

    // 是否是取消請(qǐng)求
    if (Axios.isCancel(error)) {
      console.log("err:", error);
      return Promise.reject(error);
    } else {
      console.log("請(qǐng)求有問題:", error.message);
      // 當(dāng)請(qǐng)求超時(shí)、斷網(wǎng)等問題時(shí)重發(fā)
      return againRequest(error);
    }
  }
);

export default service;

const pendingRequest = new Map();
/**
 * 添加待處理請(qǐng)求
 * @description 該函數(shù)用于管理重復(fù)請(qǐng)求，避免同一接口的多個(gè)請(qǐng)求同時(shí)進(jìn)行
 * @param {Object} config - axios請(qǐng)求配置對(duì)象
 */
function addPendingRequest(config) {
  // 創(chuàng)建axios的取消令牌源，用于請(qǐng)求的取消控制
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  // 生成請(qǐng)求的唯一鍵，用于標(biāo)識(shí)不同的請(qǐng)求
  const requestKey = generateReqKey(config);

  // 方法一
  // 如果相同請(qǐng)求已在進(jìn)行中，則取消當(dāng)前請(qǐng)求
  if (pendingRequest.has(requestKey)) {
    config.cancelToken = source.token;
    source.cancel(`${config.url} 請(qǐng)求已取消`);
  } else {
    // 如果沒有相同的請(qǐng)求在進(jìn)行中，則設(shè)置取消令牌并存儲(chǔ)請(qǐng)求鍵和取消函數(shù)的映射
    config.cancelToken = source.token;
    pendingRequest.set(requestKey, source.token);
  }
  
  // 方法二
  // 如果相同請(qǐng)求已在進(jìn)行中，則取消當(dāng)前請(qǐng)求
  if (pendingRequest.has(requestKey)) {
     config.cancelToken = new Axios.CancelToken((cancel) => {
       // cancel 函數(shù)的參數(shù)會(huì)作為 promise 的 error 被捕獲
       cancel(`${config.url} 請(qǐng)求已取消`);
     });
  } else {
     config.cancelToken =
       new Axios.CancelToken((cancel) => {
         pendingRequest.set(requestKey, cancel);
       });
  }
  
   // 以上兩種方式都能取消請(qǐng)求，但是從 Axios `v0.22.0` 開始已被棄用，從 `v0.22.0` 開始，Axios 支持以 fetch API 方式—— `AbortController`取消請(qǐng)求
}

/**
 * 移除掛起的請(qǐng)求
 * @description 當(dāng)收到響應(yīng)時(shí)，檢查并移除與該響應(yīng)相關(guān)的掛起請(qǐng)求
 * @param {Object} response - 響應(yīng)對(duì)象，包含請(qǐng)求配置信息
 */
function removePendingRequest(response) {
  // 如果 response.config 返回的是 undefined，表示是取消請(qǐng)求，則不處理
  if (response.config) {
    // 生成請(qǐng)求的唯一鍵，用于標(biāo)識(shí)不同的請(qǐng)求
    const requestKey = generateReqKey(response.config);

    // 判斷是否有這個(gè) key，有就刪除
    if (pendingRequest.has(requestKey)) {
      pendingRequest.delete(requestKey);
    }
  }
}

/**
 * 處理請(qǐng)求重試的函數(shù)
 * @description 它嘗試重新發(fā)送因錯(cuò)誤而失敗的請(qǐng)求
 * @param {Object} err - 包含錯(cuò)誤信息和配置的對(duì)象
 * @returns {Promise} 重新發(fā)送請(qǐng)求的Promise對(duì)象，解決或拒絕依據(jù)重試邏輯
 */
function againRequest(err) {
  const config = err.config;

  // 如果配置對(duì)象不存在，則直接拒絕Promise
  if (!config) return Promise.reject(err);

  // 設(shè)置用于記錄重試計(jì)數(shù)的變量 默認(rèn)為0
  config._retryCount = config._retryCount || 0;

  // 如果重試次數(shù)已經(jīng)達(dá)到3次或更多，則拒絕Promise
  if (config._retryCount >= 3) {
    return Promise.reject(err);
  }
  // 重試次數(shù)
  config._retryCount += 1;

  // 延時(shí)處理，用于控制重試的時(shí)間間隔
  var backoff = new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });

  // 在延時(shí)結(jié)束后，重新發(fā)起請(qǐng)求
  return backoff.then(() => {
    // 重新發(fā)起axios請(qǐng)求，使用更新后的配置
    return service(config);
  });
}

/**
 * 生成請(qǐng)求的唯一鍵
 * @description 這個(gè)函數(shù)的目的是根據(jù)請(qǐng)求配置生成一個(gè)唯一的鍵，用于緩存請(qǐng)求數(shù)據(jù)
 * @param {Object} config - 請(qǐng)求配置對(duì)象，包含了url、method、params和data屬性
 * @returns {string} - 返回一個(gè)根據(jù)請(qǐng)求配置生成的唯一鍵
 */
function generateReqKey(config) {
  // 請(qǐng)求得到的config.data是對(duì)象格式，響應(yīng)回來的response.config.data是字符串格式，需要轉(zhuǎn)換成對(duì)象
  if (typeof config.data === "string") {
    config.data = JSON.parse(config.data);
  }
  const { url, method, params, data } = config;

  return [url, method, JSON.stringify(params), JSON.stringify(data)].join("&");
}

import Axios from "axios";

// 創(chuàng)建一個(gè)實(shí)例
const service = Axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 1000,
});

// 添加請(qǐng)求攔截器
service.interceptors.request.use(
  (config) => {
    // 判斷是否有 token
    if (getToken()) {
      config.headers["Permission-Token"] = getToken();
    }
    // 添加待處理請(qǐng)求
    addPendingRequest(config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加響應(yīng)攔截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;
    return res;
  },
  (error) => {
    // 是否是取消請(qǐng)求
    if (!axios.isCancel(error)) {
      // 當(dāng)請(qǐng)求超時(shí)、斷網(wǎng)等問題時(shí)重發(fā)
      againRequest(error);
    }
  }
);

export default service;

let pendingRequsetList = [];

/**
 * 取消所有待處理的請(qǐng)求
 */
export const cancelPendingRequest = () => {
  // 遍歷待處理的請(qǐng)求列表，調(diào)用每個(gè)請(qǐng)求的取消方法
  pendingRequsetList.forEach((item) => {
    item.cancel();
  });
  // 清空待處理的請(qǐng)求列表
  pendingRequsetList = [];
};

/**
 * 添加待處理的請(qǐng)求
 * @description 為配置對(duì)象添加取消令牌，以便在請(qǐng)求待處理時(shí)能夠取消
 * @param {Object} config - 請(qǐng)求的配置對(duì)象
 */
function addPendingRequest(config) {
  // 創(chuàng)建一個(gè)新的取消令牌，并將取消函數(shù)存儲(chǔ)到待處理請(qǐng)求列表中
  config.cancelToken = new Axios.CancelToken((cancel) => {
    pendingRequsetList.push({
      cancel,
    });
  });
}

/**
 * 處理請(qǐng)求失敗后的重試機(jī)制
 * @description 當(dāng)請(qǐng)求失敗時(shí)，嘗試再次請(qǐng)求，最多重試3次
 * @param {Object} err - 錯(cuò)誤對(duì)象，包含請(qǐng)求的配置信息
 * @returns {Promise} 重試請(qǐng)求的Promise對(duì)象
 */
function againRequest(err) {
  // 獲取請(qǐng)求的配置信息
  const config = err.config;

  // 如果沒有配置信息，則直接拒絕Promise
  if (!config) Promise.reject(err);

  // 初始化重試次數(shù)，如果不存在則為0
  config._retryCount = config._retryCount || 0;

  // 如果重試次數(shù)已經(jīng)達(dá)到3次，則拒絕Promise
  if (config._retryCount >= 3) {
    return Promise.reject(err);
  }

  // 每次重試前，重試次數(shù)加1
  config._retryCount += 1;

  // 創(chuàng)建一個(gè)Promise，用于實(shí)現(xiàn)指數(shù)退避機(jī)制
  const backoff = new Promise((resolve) => {
    // 設(shè)置一個(gè)定時(shí)器，1秒后 resolve Promise
    setTimeout(() => {
      resolve();
    }, 1000);
  });

  // 返回一個(gè)Promise，表示再次請(qǐng)求的操作
  return backoff.then(() => {
    return service(config);
  });
}

<script>
import { cancelPendingRequest } from '@/utils/request' // 導(dǎo)入取消請(qǐng)求的方法

export default {
  methods: {
    getList() {
      cancelPendingRequest() // 取消所有正在發(fā)送請(qǐng)求的請(qǐng)求
      axios.get() // 發(fā)送新的請(qǐng)求
    }
  }
}
</script>

import Vue from 'vue'
import { cancelPendingRequest } from '@/utils/request'

Vue.prototype.$cancelPendingRequest = cancelPendingRequest // 掛載到 Vue 原型上

import router from "./router";
import Vue from 'vue'

router.beforeEach((to, from, next) => {
   Vue.$cancelPendingRequest() // 跳轉(zhuǎn)頁面之前取消之前的所有請(qǐng)求
})