- Fetch API
- 是一個函數方法，Fetch API 是一個現代的 JavaScript API，用於發送和接收網路請求。它提供了一種更強大且靈活的方式來處理 HTTP 請求，替代了傳統的 XMLHttpRequest。
簡單來說，Fetch API 提供了一個全新的 fetch() 函數，這個函數返回一個 Promise，使得處理非同步的網路請求更加直觀和方便。
#### 撰寫 js
```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。
```js
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。
```js
console.log("about to fetch a rainbow");
fetch("./rainbow.jpeg").then((response) => {
console.log(response);
return response.blod()
#### 接著就是一串一串的 then 方法返回 Promise ..
```js
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)
```js
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!
```js
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
```js
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
```js
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();
