天天看點

PWA 學習筆記(三)

Promise:

  1、ES6 引入的一種異步程式設計的解決方案,通過 Promise 對象來提供統一的異步狀态管理方法

  2、一般在使用 Promise 對象的時候,首先需要對其進行執行個體化

  3、執行個體化的 Promise 對象為異步狀态的管理容器,resolve()和reject()是用于控制 promise 狀态的方法

  4、在調用 resolve()和reject()方法的時候可傳入任意值,這個值會作為監聽狀态變更的回調函數的參數透傳出去

  5、Promise 提供了 .then(onFulfilled, onRejected) 和 .catch(onRejected)等

     原型鍊方法用于注冊狀态變更所觸發的回調函數

Promise 狀态:

  1、'pending':初始狀态,代表異步過程仍在進行中,尚未判定成功或者失敗

  2、'fulfilled':操作成功,通過調用 resolve() 方法,promise 狀态将由 'pending' 變更為 'fulfilled'

  3、'rejected':操作失敗,通過調用 reject() 方法,promise 狀态将變更為 'rejected'

Promise 的可靠性:

  1、統一格式:經過 Promise 包裝的異步過程将具有統一的狀态變更方式,統一的 API 以及統一的回調函數格式

  2、狀态不受外部影響:隻能通過 resolve() 和 reject()方法控制 Promise 的狀态,這個狀态無法被外部直接通路,

                       也沒有提供任何方法從外部修改狀态

  3、狀态具有确定性:從初始狀态(pending)變更為執行成功(fulfilled)或者執行失敗(rejected),

                     那麼這個狀态就被完全确定下來了,不會被後續的任何操作所影響

  4、回調函數是一次性的:至多觸發一次,規避了過去基于回調函數的異步程式設計當中回調函數執行次數不受控制的問題

  5、不存在回調過早問題:如果回調函數在狀态變更前注冊,則會等待狀态變更時觸發;當注冊時狀态已經确定下來,

                         那麼 Promise 會立即調用這個函數并傳入相應的傳回值

  6、回調函數間不互相影響:同一個 Promise 上注冊的回調函數彼此互相隔離,

                           是以個别回調函數執行出錯并不會影響到其他回調函數的正常執行

  7、回調函數執行的時序是确定的

Promise 的串行執行與鍊式調用:

  1、Promise.prototype.then:

    (1).then(onFulfilled, onRejected) 是 Promise 的原型鍊方法,用于注冊 Promise 對象狀态變更時的回調函數

    (2)它接受兩個回調函數作為參數,分别在 Promise 變更為不同狀态時觸發,其中 onRejected 可以預設

    (3).then() 方法會建立并傳回一個新的 Promise 對象(用 p2 指代,目前監聽的 Promise 對象用 p1 指代),

       用于表征回調函數的執行情況,這個過程滿足如下規則:

        a、p1 的狀态隻決定了何時執行回調以及執行那種類型的回調,并不會影響到 p2 狀态

        b、p2 的初始狀态為 'pending',當回調函數執行成功時狀态變更為 'fulfilled',

           如果回調執行過程抛出異常則變更為 'rejected'

        c、回調函數的傳回值 value 将作為 p2 觸發狀态變更時 resolve(value) 的參數将其傳遞下去

  2、Promise 的鍊式調用:

    (1)可非常直覺地将多個需要按順序執行的異步過程以一種自上而下的線性組合方式實作,

       在降低編碼難度的同時,也增加了代碼的可讀性

    (2)基于注冊在同一 Promise 對象的回調函數彼此互不幹擾的特性,我們可以在任何需要的地方進行鍊分叉

  3、Promise 并行執行與管理:

    (1)基于 Promise 的異步任務串行執行,本質上是通過 .then()方法去控制上一個異步任務

       完成之後再觸發下一個異步任務的執行

    (2)隻需要同步地建立這些異步任務,并對它們的 Promise 對象進行相應的管理即可改造成并行執行

    (3)Promise 已經提供了 Promise.all() 方法來實作與上述 getXAndY 一樣的功能(一種并行狀态管理的方案)

    (4)Promise.race() 方法,用于擷取第一個發生狀态變更的 Promise 對象

Fetch API:

  1、Fetch API 首先提供了網絡請求相關的方法 fetch(),其次還提供了用于描述資源請求的 Request 類,以及描述

     資源響應的 Response 對象,這樣就能夠以一種統一的形式将資源的請求與響應過程應用到更多的場景當中

  2、fetch() 需要傳入一個 Request 對象作為參數,它會根據 Request 對象所描述的請求資訊發起網絡請求

  3、fetch() 還支援傳入請求 URL 和請求配置項的方式,它會自動根據這些參數執行個體化 Request 對象之後再去發起請求

  4、fetch() 會傳回 Promise 對象,當請求響應時 Promise 執行 resolve 并傳回 Response 對象

  5、fetch() 隻有在網絡錯誤或者是請求中斷的時候才會抛出異常,此時 Promise 對象會執行 reject 并傳回錯誤資訊,

     而服務端傳回的 HTTP 404、500 等狀态碼并不認為是網絡錯誤,需要檢查 Response.status、Response.ok

     等屬性以確定請求成功響應

Request:

  1、Request 是一個用于描述資源請求的類,通過 Request() 構造函數可以執行個體化一個 Request 對象

  2、文法格式:let request = new Request(input, init)

注:input 代表想要請求的資源,可以是資源的 URL,或者是描述資源請求的 Reqeust 對象;

    init 為可選參數,可以用來定義請求中的其他選項

  3、發送請求:

    (1)GET 請求,請求參數需要寫到 URL 當中

    (2)POST 請求,請求參數需要寫到 body 當中

    (3)自定義請求的 Headers 資訊

    (4)設定發起資源請求時帶上 cookie

  4、常見屬性:

    (1)url:String 類型,隻讀,請求的 url

    (2)method:String 類型,隻讀,請求的方法,如 'GET','POST' 等

    (3)headers:Headers 類型,隻讀,請求的頭部,可通過 get() 方法擷取 'Content-Type','User-Agent' 等資訊

Response:

  1、Response 類用于描述請求響應資料,通過 Response() 構造函數可以執行個體化一個 Response 對象

  2、文法格式:let response = new Response(body, init)

注:body 參數代表請求響應的資源内容,可以是字元串、FormData、Blob 等等;

    init 為可選參數對象,可用來設定響應的 status、statusText、headers 等内容

  3、在實際應用當中,我們一般會通過 fetch()、Cache API 等等獲得請求響應對象,然後再對響應對象進行操作

  4、Response 對象的相關屬性:

    (1)status:Number 類型,包含了 Response 的狀态碼資訊,開發者可以直接通過 status 屬性進行狀态碼檢查,

       進而排除服務端傳回的錯誤響應

    (2)statusText:String 類型,包含了與狀态碼一緻的狀态資訊,一般用于解釋狀态碼的具體含義

    (3)ok:Boolean 類型,隻有當狀态碼在 200-299 的範圍時,ok 的值為 true

  5、讀取響應體:

    (1)text():解析為字元串

    (2)json():解析為 JSON 對象

    (3)blob():解析為 Blob 對象

    (4)formData():解析為 FormData 對象

    (5)arrayBuffer():解析為 ArrayBuffer 對象

  6、Response 提供了 clone() 方法來實作對 Response 對象的拷貝

Fetch API 與 XHR 對比:

  1、Fetch API 的異步機制更為先進

  2、Fetch API 更為簡潔

  3、Fetch API 的應用範圍更廣

Cache API:

  1、相容性檢測:在主線程或者 Worker 線程中通過判斷全局變量 caches 是否存在來檢測浏覽器是否支援 Cache API

  2、打開 Cache 對象:通過 caches.open() 方法可以打開一個 Cache 對象,cacheName 表示要打開的 Cache 對象的名稱。

                      該方法是異步方法,傳回的 Promise 對象在 resolve 時會傳回成功打開的 Cache 對象

  3、添加緩存:Cache 對象提供了 put()、add()、addAll() 三個方法來添加或者覆寫資源請求響應的緩存

               這些添加緩存的方法隻會對 GET 請求起作用

  4、查找緩存:cache.match() 和 cache.matchAll() 可以實作對緩存的查找

  5、擷取比對的請求:通過 cache.keys() 方法實作

  6、删除緩存:通過 cache.delete() 方法可以實作對緩存的清理