axios.interceptors.request.use(
  (config) => {
    // config中不設(shè)置showLoading這個(gè)字段或者這個(gè)字段為true時(shí)，代表需要全局顯示loading
    if (config.headers.showLoading !== false) {
      // 全局顯示loading
      Loading.showLoading();
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  },
);

instance.interceptors.response.use(
  (response) => {
    const { config: { headers } } = response;
    if (headers.showLoading !== false) {
      // 關(guān)閉全局的loading
      Loading.hideLoading();
    }
    return data;
  }
);

// 中間件管理器，用于添加，刪除中間件。
// 另外這個(gè)添加的中間件給誰(shuí)用，也需要用參數(shù)（job）保存起來(lái)。
class MiddleWareManager {
  // 添加的中間件是給誰(shuí)用的，我們用job標(biāo)識(shí)，如果中間件是給axios用，那么這個(gè)job就是axios方法。
  // middleWares用來(lái)保存中間件。
  // job和中間件都是返回Promise對(duì)象的方法。
  // 其中，job接受一個(gè)參數(shù)config，由最后一個(gè)中間件傳遞。
  // 中間件接受兩個(gè)參數(shù)，一個(gè)是他之前的中間件傳遞的config，一個(gè)是執(zhí)行下一個(gè)中間件的方法。
  constructor(job) {
    // 這里默認(rèn)加上axios請(qǐng)求
    this.job = job;
    this.middleWares = [];
  }

  use(middleWare) {
    this.middleWares.unshift(middleWare);
    return this;
  }

  remove(middleWare) {
    const index = this.middleWares.indexOf(middleWare);
    this.middleWares.splice(index, 1);
    return this;
  }

  run(config) {
    const { length } = this.middleWares;
    function innerRun(config, index) {
      // 如果中間件已經(jīng)執(zhí)行完畢，這直接job函數(shù)。
      if (index >= length) {
        return this.job(config);
      }
      // 否則執(zhí)行下一個(gè)中間件函數(shù)
      return this.middleWares[index](config, (config) => innerRun(config, index++));
    }
    innerRun(config, 0);
  }
}

// middleWare1用于處理是否需要全局的顯示loading
async function middleWare1(config, next) {
  // 查看config中是否有showLoading標(biāo)記，如果沒(méi)有或者為true， 則需要全局顯示loading, 
  // 當(dāng)接收到響應(yīng)后，自然需要關(guān)閉loading
  // 自然收到響應(yīng)后，根據(jù)這個(gè)標(biāo)記確定是否需要關(guān)閉loading
  const { showLoading, ...rest } = config;
  if (showLoading !== false) {
    // 顯示loading動(dòng)畫
  }
  const response = await next(rest);
  if (showLoading !== false) {
    // 關(guān)閉動(dòng)畫
  }
  return response;
}

// 組裝MiddleWareManager
const manager = new MiddleWareManager(axios);
manager.use(middleWare1);

// 實(shí)現(xiàn)request方法，用于發(fā)送請(qǐng)求
function request(config) {
  return manager.run(config);
}

request({
  url: 'xxx',
  method: 'get'
})

request({
  url: 'xxx',
  method: 'get',
  showLoading: false
})