談談 Promise 以及實現 Fetch 的思路

whosmeya發表於2020-06-24
Promise

Promise 是非同步程式設計的一種解決方案。

Promise


/**
 * 屬性
 */
Promise.length
Promise.prototype

/**
 * 方法
 */
Promise.all(iterable)   // 所有成功觸發成功  任何失敗觸發失敗
Promise.race(iterable)  // 任意一個成功或失敗後觸發
Promise.reject(reason)
Promise.resolve(value)

/**
 * 原型
 */
Promise.prototype.constructor
//方法
Promise.prototype.catch(onRejected)
Promise.prototype.then(onFulfilled, onRejected)
Promise.prototype.finally(onFinally)

Promise 有三種狀態

  • pending: 初始狀態，既不是成功，也不是失敗狀態。
  • resolve: 意味著操作成功完成。(resoloved)
  • reject: 意味著操作失敗。

pending

pending 是初始狀態，執行 resolve/reject 會進入對應狀態，如果不執行，責一直為 pending 狀態

例如下面程式碼，promise 將一直在 pending 狀態，不會執行 then/catch.

new Promise(function (resolve, reject) { })
  .then(res => console.log(res))
  .catch(err => console.log(err))

resolve

resolve 意味著操作成功完成, 如果有 .then，值會傳入 .then 的第一個引數函式裡。

如

new Promise(function (resolve, reject) {
  resolve(1)
})
  .then(res => console.log(res))

then 的第一個引數是成功的回撥，第一個引數的返回值會影響接下來鏈的去向。第一個引數的返回值一般有三種情況

  • 無返回值：會去執行下一個 .then ，沒有引數
  • 返回值非promise：呼叫下一個then的函式，引數為返回值
  • 返回值為promise：根據promise的執行結果，執行 下一個then/catch，如果一直是pending，則不執行下一個then/catch

例如想要在當前 then 終止，可以這樣操作：

  .then((res) => new Promise(() => {}))

reject

reject 意味著操作失敗。

使用 .catch 會捕獲到錯誤資訊。

與程式碼報錯(如 undefined.a)不同的是, 程式碼報錯如果不使用 catch 捕獲，會向外傳遞，最終傳遞到根結點；而 reject 屬於 promise 錯誤，即使不使用 catch 捕獲也不會對全域性有影響。


用 promise 實現 fetch

先來看幾個問題：

  1. 如果請求 code 404, 會走 then 還是 catch? (答案：then)
  2. 控制檯能看到一行 404 的錯誤, 為什麼還是走 then 不是 catch 呢
  3. 如果請求跨域失敗，走 then 還是 catch?（答案：catch）
  4. 同樣是控制檯看到錯誤，兩者有什麼區別呢?
  5. 跨域失敗的報錯, 和 then 中 undefined.a 報錯，如果都不 catch，後者在 react 腳手架開發環境頁面會蹦，兩者有什麼區別?

帶著這幾個問題，來看看 fetch。

fetch 返回值是 promise，所以有三種狀態 pending、resolve、reject.

  • pending: 請求中
  • resolve: 請求成功（code 200/404/500 等, 非 200 控制檯輸出錯誤）
  • reject: 請求失敗（跨域失敗、連線超時、無網路等，控制檯輸出錯誤）

我們還發現，請求失敗時，只能 catch 到最後一行錯誤, 如圖

談談 Promise 以及實現 Fetch 的思路

捕獲後

談談 Promise 以及實現 Fetch 的思路

為什麼 404 在控制檯看到錯誤，還走 then, resolve 如何實現

實現有幾個難點，

  1. throw 後面程式碼不會執行;
  2. 先報錯，後執行 then；
  3. catch 後錯誤不會列印在控制檯；

試了下，Promise.reject('xxx') 這樣的報錯方式雖然是微觀任務，但是總是在.then之後才在控制檯輸出，更像是巨集觀任務。所以也加個setTImeout巨集觀任務調至後面。

var fetch = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if ('請求成功 200') {
        resolve('Response資料結構');
      } else if ('請求成功 404，500等') {
        Promise.reject('GET xxxxxxxx 404');
        setTimeout(function () {
          resolve('Response資料結構');
        });
      }
    })
  })
}

請求失敗 例如跨域失敗 reject 如何實現呢

同樣加個 setTimeout

var fetch = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if ('請求成功 200') {
        resolve('Response資料結構');
      } else if ('請求成功 404，500等') {
        Promise.reject('GET xxxxxxxx 404');
        setTimeout(function () {
          resolve('Response資料結構');
        });
      } else if ('請求失敗') {
        Promise.reject('Access to fetch xxxxx with CORS disabled.');
        Promise.reject('GET xxxxx net::ERR_FAILED');
        setTimeout(function () {
          reject('TypeError: Failed to fetch');
        });
      }
    })
  })
}

還是有些問題，我們實現的因為在promise 中，錯誤會有字首 Uncaught (in promise)。瀏覽器客戶端應該有更好的實現方式。

最後總結一下 fetch 的三種情況

  • pending: 請求中
  • resolve: 請求成功（code 200: 呼叫 resolve 返回資料； code: 404/500 等, 先拋錯，再呼叫 resolve 返回資料。）
  • reject: 請求失敗（跨域失敗、連線超時、無網路等，先控制檯拋錯，再呼叫 reject）

拋錯均不影響程式碼執行，與 undefined.a 不同。


whosmeya.com

相關文章