2024-08-31 JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

發表於 更新於 分類於 閱讀次數：
2024-08-31 JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法
課程目標
認識 AJAX 與不同的 HTTP 請求方法

課程內容
HTTP 協定中，HTTP Request 有多種不同的方法

前面幾課的寫法，都是 HTTP GET 類型，這一課來接著談談更多不同的請求方法

繼續使用模擬電商網站的範例 API

使用 HTTP POST 新增一筆用戶資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
fetch('https://fakestoreapi.com/users', {
    method: "POST",
    body: JSON.stringify({
      email: 'John@gmail.com',
      username: 'johnd',
      password: 'm38rmF$',
      name: {
        firstname: 'John',
        lastname: 'Doe'
      },
      address: {
        city: 'kilcoole',
        street: '7835 new road',
        number: 3,
        zipcode: '12926-3874',
        geolocation: {
          lat: '-37.3159',
          long: '81.1496'
        }
      },
      phone: '1-570-236-7033'
    })
  })
  .then(res => res.json())
  .then(json => console.log(json))

在這個範例中，fetch() 函式的第二個參數是一個物件，把 method 屬性設定好，然後 body 代表 HTTP body 的內容

必須是字串，所以用 JSON.stringify() 把物件轉換成 JSON 字串

整段看不太懂沒關係，需要了解 HTTP 協定的細節才比較看得懂，現在就先照做即可

要注意我們是用模擬電商 API，一切都是模擬的

最後主機會回應一個新的用戶 ID，看起來是新增成功了，但實際上並沒有東西新增到資料庫喔～

使用 HTTP PUT 更新一筆用戶資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
fetch('https://fakestoreapi.com/users/7', {
    method: "PUT",
    body: JSON.stringify({
      email: 'John@gmail.com',
      username: 'johnd',
      password: 'm38rmF$',
      name: {
        firstname: 'John',
        lastname: 'Doe'
      },
      address: {
        city: 'kilcoole',
        street: '7835 new road',
        number: 3,
        zipcode: '12926-3874',
        geolocation: {
          lat: '-37.3159',
          long: '81.1496'
        }
      },
      phone: '1-570-236-7033'
    })
  })
  .then(res => res.json())
  .then(json => console.log(json))

在這個範例中，去更新用戶 ID 為 7 的使用者資料

方法設定為 PUT，body 一樣放整個 JSON 字串

使用 HTTP DELETE 刪除一筆用戶資料

1
2
3
4
5
fetch('https://fakestoreapi.com/users/6', {
    method: "DELETE"
  })
  .then(res => res.json())
  .then(json => console.log(json))

在這個範例中，去刪除用戶 ID 為 6 的使用者資料

方法設定為 DELETE，不需要提供 body

實務上，API 設計時，有人偏好這種 GET POST PUT DELETE 都用到的寫法

有人則偏好只使用 GET 與 POST

撈資料一律都用 GET，除此之外，會更新到資料庫內容的動作，通通都用 POST

這屬於主觀偏好，沒有對錯問題，團隊討論後有共識即可

上面的範例，用戶參數都是在網址最後加上 /{ID} 這種格式帶入

實務上，GET 參數也可能用 ?id={ID} 這種格式

而在 POST 或其他類型的請求中，用戶參數也可能直接加在 body: JSON.stringify({ 裡面的屬性之中

各種做法，都可以，一樣屬於主觀偏好，沒有對錯問題，團隊討論後有共識即可

課後作業
接續上一課的作業，加上刪除按鈕

請翻閱 API 文件說明 https://fakestoreapi.com/docs

找出「刪除商品」的 API

把每個商品的 html 改成

1
2
3
4
5
<li>
  <span>xxx</span>
  <button>Details</button>
  <button>Delete</button>
</li>

點擊 Delete 按鈕，就發送 API 出去

主機回應成功的話，就把整個<li>元素刪掉
主機回應失敗的話，就跳 alert 提醒用戶稍後再試
做出以上功能，你就完成這次的課程目標了！

文章取自: https://codelove.tw/@howtomakeaturn/post/ga9jWq
by 站長阿川