iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
自我挑戰組

轉職軟體工程師的543系列 第 29

【Day 29】JavaScript fetch

  • 分享至 

  • xImage
  •  

Fetch() 是 ES6 引入的標準之一。主要是搭配 Promise 來執行 request 請求網站和請求後 response 獲取的處理方,同時也提供全域物件的WorkerOrGlobalScope.fetch()方法,使得在網路上非同步地 fetch 網路資源 這件事變得簡單易懂。

同樣的功能,以前都是使用 XMLHttpRequest,而 Fetch 作為其替代方案,簡化了許多原本較為複雜的用法,也讓程式碼寫起來更加乾淨易讀好維護。

根據MDN,fetch 和 jQuery.ajax() 有三個主要的差異:
1.fetch() 回傳的 promise 不會 reject HTTP 的 error 狀態,就算是 HTTP 404 或 500 也一樣。相反地,它會正常地 resolve,並把 ok 狀態設為 false。會讓它發生 reject 的只有網路錯誤或其他會中斷 request 的情況。
2.fetch 可以接收跨站的 cookies,你可以用 Fetch 來建立跨站的 session。
3.fetch 不會傳送 cookies,除非你有設定 credentials 的 init option。

使用 Fetch 發送請求 ( request )

fetch('request 的網址')
  .then(function(response) {
    return response.json();    //將原始數據轉換成json格式,然後返回至下一個then
  })
  .then(function(myJson) {
    console.log(myJson);
  });

上一篇
【Day 28】JavaScript Promise
下一篇
【Day 30】JavaScript Async/Await
系列文
轉職軟體工程師的54330
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言