JS-[promises篇]-promises 與 Fetch API


雖然不知道promise是怎麼取得名稱,姑且讓它當作一個帶我們逃離回呼函式的地獄的一種“承諾”?!很好記!

改寫前面的古老的ajax call:XMLHttpRequest()

Jonas在非同步的章節,從古老的ajax call:XMLHttpRequest()帶學生體驗到“callback hell”,再到現在用fetch API來改寫古老的寫法,可以感受到老師的用心良苦!

用fetch API改寫

使用fetch API,這裡只是生成簡單的"get"請求,所以就不需要用到它本身提供的物件屬性,有寫在補充,未來可以查看

用Fetch Api改寫XMLHttpRequest的程式碼送出請求:

會立即得到一個promise/承諾

什麼是promise 承諾?

jonas把promise講得很清楚

ES6 Promise:逃離callback hell

使用promise的好處

  • 使我們不再依賴事件和callback fn來處理非同步像是ajax call請求所得到的結果,因為事件以及callback fn常常會導致不可預料的錯誤狀況
  • 除了使用巢狀的callback fn,有了promise就可以用非同步的方式操作“串接promise”的方式,例如:用.then()來串接promise,相比巢狀回呼地獄來的明朗多了

promise lifecycle

  • promise和非同步一起進行,需要知道的是,promise是有時間性的,所以promise可以處於不同的狀態,這就是promise 生命週期。

  • 下章節是關於如何消耗一個promise


補充:

fetch API補充(fetch api也是一個函式)

老師提到在使用fetch API時,提到Fetch api函式可以指定物件屬性來使用,所以我大概用chatgpt稍微查了常用的物件屬性:
在 JavaScript 中,使用 fetch API 来进行网络请求时,你可以使用以下一些常用的属性:

  • method(方法): 表示请求的 HTTP 方法,如 "GET"、"POST"、"PUT" 等。
  • headers(头部): 一个 Headers 对象,表示请求的头部信息,可以设置或修改各种请求头,例如 "Content-Type"。
  • body(请求体): 请求的主体数据,可以是一个字符串、一个 FormData 对象、一个 Blob 对象等。
  • mode(模式): 请求的模式,如 "cors"、"no-cors"、"same-origin" 等。
  • credentials(凭证): 表示是否在请求中包含凭证信息,如 "same-origin"、"include"、"omit" 等。
  • cache(缓存): 请求的缓存模式,如 "default"、"no-store"、"reload" 等。
  • redirect(重定向): 表示如何处理重定向,如 "follow"、"error"、"manual" 等。
  • referrer(引用页): 请求的引用页,可以是 "no-referrer"、"client"、URL 等。
  • referrerPolicy(引用页策略): 控制请求的引用页信息,如 "no-referrer-when-downgrade"、"strict-origin" 等。
  • integrity(完整性): 用于验证资源完整性的哈希值,用于验证下载的资源是否被篡改。
#Promise







你可能感興趣的文章

[TensorFlow Certification Day2] 課程規劃與安排時間

[TensorFlow Certification Day2] 課程規劃與安排時間

Styled Components

Styled Components

[ 前端工具 ] - Bootstrap

[ 前端工具 ] - Bootstrap






留言討論