怎樣優雅進行控制全局loading的顯示

這篇文章將為大家詳細講解有關怎樣優雅進行控制全局loading的顯示，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

在很多后臺管理系統中，發送請求的時候，需要打開一個loading，收到響應后，需要關閉這個loading,對于這種通用的邏輯，我一般是在axios攔截器中做這種處理，因為不是每個請求都需要全局顯示loading，所以我在axios config中添加了一個標記showLoading, 用于標記發送請求之前是否需要顯示loading，自然收到響應后，根據這個標記確定是否需要關閉loading，在axios攔截器中的代碼如下：

axios.interceptors.request.use(
  (config) => {
    // config中不設置showLoading這個字段或者這個字段為true時，代表需要全局顯示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) {
      // 關閉全局的loading
      Loading.hideLoading();
    }
    return data;
  }
);

我自己自然覺得上面那個實現自然滿足要求了，但是偶然一次和后端同事聊起這個問題，后端同事說，這個前端的標記（showLoading）怎么能傳遞給后端服務器了，并且還說，如果是他和我對接，絕對不允許我這么做。然后我就懵逼了，因為想不到解決辦法。

直到后來了解到洋蔥模型，其實請求，響應天然的適用洋蔥模型，如果給axios添加上洋蔥模型，這個問題就自然而然解決了啊。下面講解如何給axios添加洋蔥模型，如果有了洋蔥模型，axios攔截器就沒有必要了，因為洋蔥模型比axios攔截器更好用。

• 聲明MiddleWareManager類，這個類是洋蔥模型的具體實現，代碼如下。

// 中間件管理器，用于添加，刪除中間件。
// 另外這個添加的中間件給誰用，也需要用參數（job）保存起來。
class MiddleWareManager {
  // 添加的中間件是給誰用的，我們用job標識，如果中間件是給axios用，那么這個job就是axios方法。
  // middleWares用來保存中間件。
  // job和中間件都是返回Promise對象的方法。
  // 其中，job接受一個參數config，由最后一個中間件傳遞。
  // 中間件接受兩個參數，一個是他之前的中間件傳遞的config，一個是執行下一個中間件的方法。
  constructor(job) {
    // 這里默認加上axios請求
    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) {
      // 如果中間件已經執行完畢，這直接job函數。
      if (index >= length) {
        return this.job(config);
      }
      // 否則執行下一個中間件函數
      return this.middleWares[index](config, (config) => innerRun(config, index++));
    }
    innerRun(config, 0);
  }
}

• MiddleWareManager已經實現，接下來是講解如何將MiddleWareManager和axios組合到一起使用。我們會定義一個request方法，當我們需要發送請求的時候，我們就統一調用request方法。

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

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

// 實現request方法，用于發送請求
function request(config) {
  return manager.run(config);
}

• 當我們發送請求需要全局打開loading時，像如下做

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

這樣在發送請求前，會自動打開loading，當接收到響應后，會自動關閉loading. 當我們不需要自動打開loading的功能時，我們只需要在發送請求時在config中添加showLoading: false就可以了，代碼如下

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

這樣做是不是滿足了后端同事的要求了呢！并且洋蔥模型也比攔截器使用起來更加方便，特別是在請求和響應中訪問相同的變量的時候。就如我們例子中的showLoading. 當然我們也可以把攔截器中的更多功能移到洋蔥模型的中間件中，比如發送請求時,自動添加token。

關于怎樣優雅進行控制全局loading的顯示就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。