昨天才剛把資料塞進 LocalStorage，

今天突然想到另一個問題：

如果我要的資料根本不在我的網頁裡呢？

像天氣、文章、會員資料、商品資料……

總不能全部自己手打一份吧 ==

這時候就要開始跟外面的資料打交道了。

所以今天來看看：

Fetch API

Fetch 是來幹嘛的？

可以先很簡單地理解成：

JavaScript 幫我出去拿資料。

例如今天想跟 API 要一筆使用者資料：

fetch("https://jsonplaceholder.typicode.com/users/1")

看起來很簡單。

但如果直接：

console.log(fetch("https://jsonplaceholder.typicode.com/users/1"));

結果不會直接看到我要的使用者資料，

反而會看到一個：

Promise

我：

蛤？我叫你拿資料，你拿一個 Promise 回來是？？？

原來 fetch() 不會在那一瞬間就把資料交給我。

畢竟它還要出去問：

「欸～資料可以給我嗎？」

然後等對方回覆。

所以需要一點時間。

.then()：拿到了再叫我

可以這樣寫：

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  });

這時候 Console 就可以看到類似：

{
  id: 1,
  name: "Leanne Graham",
  username: "Bret",
  ...
}

終於！！！

這次真的把資料拿回來了。

等一下，response.json() 又是誰？

API 回來的 Response 還不能直接當成我們想要的 JavaScript 資料使用。

所以這裡用了：

response.json()

把回傳內容解析成 JavaScript 可以操作的資料。

大概可以想成：

外送送到了，但先拆包裝再吃。

不然整包抱著也是不知道要幹嘛 XD

拿到了，就不要只躲在 Console

既然前幾天都學會改 HTML 了，

當然不能又只：

console.log(data);

先準備一個地方：

<h1 id="name">資料載入中...</h1>

JavaScript：

const name = document.querySelector("#name");

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    name.textContent = data.name;
  });

資料拿回來之後，

原本畫面上的：

資料載入中...

就會變成 API 回傳的名字。

欸！

這次網頁真的開始跟外面的資料有交流了。

終於不是所有東西都自己關在家裡玩 XD

那如果拿資料失敗呢？

外面的世界沒有永遠這麼和平。

網路可能斷掉，

API 可能掛掉，

網址也可能打錯。

所以至少可以先加：

.catch(function(error) {
  console.log("出事了！", error);
});

完整一點：

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log("出事了！", error);
  });

這樣如果 Request 過程真的發生錯誤，

至少不是整支程式默默躺平。

可以先知道：

喔，好，真的出事了。

至於 HTTP 404、500 這些狀態要怎麼處理，之後再繼續補。

今天先不要一次挖太多洞給自己跳 XD

今天先記這個流程

fetch()
   ↓
送出請求
   ↓
收到 Response
   ↓
response.json()
   ↓
取得資料
   ↓
拿去改畫面

程式碼就是：

fetch("API 網址")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

今天的小心得

前幾天的 JavaScript 都還是在自己的網頁裡打轉。

Array、Function、DOM、LocalStorage……

今天第一次真的：

跑出去跟外面要資料。

雖然中間突然冒出一個 Promise，

又一堆 .then()，

看起來開始有一點：

「事情是不是要變複雜了？」

的感覺。

嗯。

我的直覺通常滿準的 XD

不過今天先知道：

Fetch 可以幫我們向外部取得資料。

至於那個一直出現的 Promise，

還有怎麼把 .then().then().then() 寫得不要那麼像接龍——

之後再來處理它。

好啦！

今天成功把 JavaScript 放出去拿資料了。

Day 22，完成！