一文教你如何優雅的控制全局loading的顯示

Posted on by

在很多後臺管理系統中，發送請求的時候，需要打開一個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的顯示的文章就介紹到這瞭,更多相關控制全局loading顯示內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：