前言

一直以來在簡單的場景中經常使用fetch代替第三方請求庫, fetch是JavaScript的原生函數, 簡單、高效、快速、穩定、可客製化等等諸多優點。一直也是用著很是舒服，直到有一天它竟然報錯了。

什麼是Fetch?

官方: Fetch API 提供了一個 JavaScript 介面，用於存取和操縱 HTTP 管道的一些具體部分，例如請求和響應。它還提供了一個全域性 fetch() 方法，該方法提供了一種簡單，合理的方式來跨網路非同步獲取資源。

還原現場

因為業務需求簡單,這裡只封裝了get和post方法, 並且後端資料都是已預設的json格式返回

const http = {
  apiBaseUrl: config.apiBaseUrl,
  get: function (url) {
    return new Promise((resolve, reject) => {
      fetch(this.apiBaseUrl + url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        }
      }).then(res => res.json()).then(res => {
        resolve(res);
      }).catch(e => {
        console.error("請求失敗了,詳細資訊:" + JSON.stringify(e));
        reject(e);
      });
    })
  },
  post: function (url, body) {
    return new Promise((resolve, reject) => {
      fetch(this.apiBaseUrl + url, {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        }, body: JSON.stringify(body)
      }).then(res => res.json()).then(res => {
        resolve(res);
      }).catch(e => {
        console.error("請求失敗了,詳細資訊:" + JSON.stringify(e));
        reject(e);
      })
    })
  }
}

這樣的封裝貌似也沒什麼問題