What is Fetch?

fetch 創建於 2014 年，並且納入 global window (全域 window 物件) 的行列中。
fetch 將 URL string 作為參數來請求我們可以在 JS 文件中使用的數據 (data)。
此外, fetch 有可以有 兩個參數:

1. URL

2. Arguments (一些參數, e.g. method, request body, header …)

   function helloIt() {
     const URL = "https:...";
     fetch(URL + "/...") // returns a Promise
       .then(...)
       .then(...)
       .catch(...);
   }
   

比較白話來說的話, 我們需要對從服務器 (server) 返回的數據做一些事情, 但是我們不知道這需要花多長時間, 或者數據是否會正確地返回, 此時就需要 fetch 的幫忙啦! fetch call 會返回一個 Promise 物件，而它將幫助我們解決這種不確定性。
在 JavaScript 中, 使用 fetch 函數來 抓取 url, 而程式會 return 一個 promise 給你。

const example = fetch("https:...");
// Promise (pending)
console.log(example);

那麼接下來該如何拿取 fetch 裡面的資料呢? 我們需要用到 .then() function,
接著傳入一個 callback function。

fetch("https:....").then((response) => {
  console.log(response.status);
});

Fetch code 骨幹架構

以下的 code 有沒有更容易閱讀呢? 整個 fetch code skeleton 將較大的 callback 函數拆解成命名函數 (named functions)。
你也會注意到說, 每個傳遞給 then 的 callback 函數的返回值正是傳遞給下一個 then callback 的 arguments (參數)。對於簡短的 callbacks，我們還看到了 箭頭函數語法 的動機！

 function fetchTheData() {
   fetch(url + parameters)
     .then(statusCheck)
     .then(response => response.json())    // if JSON (把資料轉成JSON格式)
     // .then(response => response.text()) // if text (把資料轉成text格式(變成純字串))
     .then(processResponse)
     .catch(handleError);
   }
 }
 function processResponse(data) { ... }
 function handleError(err) { ... }
 function statusCheck(response) { ... }

GET

你可以在某個網站上做測試, 用 GET 抓取其現在的 IP 位置。這邊我們就拿 iT 邦幫忙的網址來做測試吧!

開啟 DevTools, 在 console 打入以下的 code

fetch("https://ithelp.ithome.com.tw/")
  .then(function (response) {
    console.log(response);
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log(err);
  });

當 fetch 成功抓取到網站 IP 位置後, 便會回傳 response, status 顯示 200, 表示資料抓取
成功。

以上是 response 的部分, 那麼 fetch 會怎麼處理 error 呢?
例如我們故意給它抓取一個錯誤的 iT 邦幫忙網址…

fetch("https://ithelp.ithome.com.tw/hello")
  .then(function (response) {
    console.log(response);
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log(err);
  });

由於是一個錯誤的網址, fetch 在嘗試抓取時, 最終會抓取不到, 由 catch 去 handle error 回傳 err 錯誤訊息, status 顯示 404。

POST

這邊我們就拿網路上找到一個範例資料庫的網址來做測試吧! 使用 POST 時, 需要用到fetch裏的第二個参數, method, request body
傳請求的物件內容: body, 然後讓我們 POST json 的資料庫格式 -> check then 是否能接收 POST 成功的 message。

// URL credit: https://jsonplaceholder.typicode.com/posts
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  mode: "cors",
  // 需要注意一點的是: 参數需轉成字串，不然資料會變成 [object Object]的格式, 將無法被存在後台
  body: JSON.stringify({ message: "POST Testing" }),
})
  .then(function (response) {
    console.log(response);
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log(err);
  });

結果會發現回傳的是 status: 201, 是可以成功接受到 POST 訊息請求的。