#### catch rainbow !

- Fetch API
- 是一個函數方法，Fetch API 是一個現代的 JavaScript API，用於發送和接收網路請求。它提供了一種更強大且靈活的方式來處理 HTTP 請求，替代了傳統的 XMLHttpRequest。

簡單來說，Fetch API 提供了一個全新的 fetch() 函數，這個函數返回一個 Promise，使得處理非同步的網路請求更加直觀和方便。

---

#### 撰寫 js

console.log("about to fetch a rainbow"); 

// 你的第一個 fetch() , 這裡的目的是請求獲得 rainbow.jpeg。 
fetch("./rainbow.jpeg");

// 控制台輸出如果沒報錯誤，就是路徑正確了!
-> about to fetch a rainbow

#### .then() 是什麼？

- .then() 是 Promise 物件提供的一個方法，用於設置當 Promise 物件成功解析（resolved）時應執行的回調函數。在 Fetch API 中，.then() 常用來處理由 fetch() 返回的 Promise。

console.log("about to fetch a rainbow");
// .then() 寫在請求的 fetch() 之後
fetch("./rainbow.jpeg").then((response) => {
    // 可打印 console.log , 觀察 response
  console.log(response);
});


right , 你得到了這些數據，而這串數據則表示為一段 `promise`

#### Promise:

- 由字面上的意思來看，**承諾，則表示在未來的某個時刻
我們將會返回一個數據**。

- 關於 Promise，可以看這部[影片](https://www.bilibili.com/video/BV1WP4y187Tu/?vd_source=1f341f0ab335f404bf6079fee5d5b907)有更清楚的解釋。

---

#### 取得承諾以後，調用它的 .then 方法取得回應吧：

- `.blob()`: blob() 是 Response 物件提供的方法之一，通常用於處理**圖片、音頻、視頻等二進制數據**。

不同於我們經常看到的`.json()` example。

console.log("about to fetch a rainbow");
fetch("./rainbow.jpeg").then((response) => {
  console.log(response);
  return response.blod() 
});

#### 接著就是一串一串的 then 方法返回 Promise ..

console.log("about to fetch a rainbow");
fetch("./rainbow.jpeg")
  .then((response) => {
    console.log(response);
    return response.blob();
  })
// 上面返回一個 Promise 以後，在使用一次 then 方法來解析 Promise
  .then((blob) => {
    console.log(blob);
  });

// -> Blob {size: 48046, type: 'image/jpeg
yaaaa , 你取得了 圖片檔案的數據了，緊接著可以執行操作。

#### 在 then 方法下得到你的圖片：

- Well , 實際上，你會在這步驟失敗，因為這個數據路徑不是正確顯示在 Dom 上的規則。

- 我們需要一個接受 blob 格式的處理方法:

[URL: createObjectURL() static method
](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static)

console.log("about to fetch a rainbow");
fetch("./rainbow.jpeg")
  .then((response) => {
    console.log(response);
    return response.blob();
  })
  .then((blob) => {
    console.log(blob);
    // 取的 image 後，顯示在 Dom
    document.getElementById("rainbow").src = blob;
  });

#### 使用 URL: createObjectURL() static method

- 接著，你就可以正確取得 rainbow!

console.log("about to fetch a rainbow");
fetch("./rainbow.jpeg")
  .then((response) => {
    console.log(response);
    return response.blob();
  })
  .then((blob) => {
    console.log(blob);
    // 取的 image 後，顯示在 Dom
    document.getElementById("rainbow").src = URL.createObjectURL(blob);
  });


#### 學習 error & catch

console.log("about to fetch a rainbow");
fetch("./rainbow.jpeg")
  .then((response) => {
    console.log(response);
    return response.blob();
  })
  .then((blob) => {
    console.log(blob);
    // 這邊我故意把檔案名稱打錯，透過下列的 .error , 來觀看錯誤訊息。
    document.getElementById("rainboww").src = URL.createObjectURL(blob);
  })
  .catch((error) => {
    // 數據也可能出錯，所以撰寫一個 .catch 也是一個很好處理數據錯誤的方法。
    console.error(error);
    console.log("error");
  });

// -> 


#### Async await

- 改成 Await 方式來寫非同步函數操作，會變得更加簡潔。
- 就是不用像是在上面寫得又臭又長 lol

console.log("about to fetch a rainbow");

async function catchRainbow() {
  const response = await fetch("./rainbow.jpeg");
  const blob = await response.blob();
  document.getElementById("rainbow").src = URL.createObjectURL(blob);
}

catchRainbow();