談談 Promise 以及實現 Fetch 的思路

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 到最後一行錯誤, 如圖

捕獲後

爲何 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