網路請求

之前在 AJAX 時提到了不少用法，其實請求的方法有不少，傳遞的資料也有不同，如果前後端分離，兩者其實就是用 API 溝通，因此做個紀錄

• 前面的筆記
  • XMLHttpRequest：JavaScript Day19 - AJAX(1)
  • fetch：JavaScript Day20 - AJAX(2)
  • axios：JavaScript Day21 - AJAX(3)
• method：請求的方法
  • GET：取得資料，參數或資料會直接在網址上，如取得一般資料
  • POST：提交(新增)資料，參數或資料不會在網址上，如建立訂單資料
  • PATCH：修改部分資料，如修改訂單資料
  • PUT：修改全部資料，如修改整筆訂單資料
  • DELECT：刪除資料，如刪除訂單資料
• content-type：對於 post 主要有這幾種傳遞資料的種類
  • application/x-www-form-urlencoded：一般的 form 表單送出的方式
  • application/json：主要是送出 JSON 格式的資料
  • multipart/form-data：當要傳送檔案的時候
  • text/plain：一般的文字

fetch

// post
const url = '';  // API url
const data = {
  "name": name.value,
  "password": password.value
}; // JSON data

fetch(url,{
  method:'POST', // 依需求更換 method
  body:JSON.stringify(data), // 依需求調整格式
  headers: {'Content-Type': 'application/json'}  // 依需求調整格式
  }).then() // function

// 假設有一個 form 的上傳表單
let formData = new FormData();
let fileField = document.querySelector("input[type='file']");

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

// fetch post
fetch('https://example.com/profile/avatar', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

axios

let url = 'https://apiurl';
let data = {
    // JSON data
};

//請求表頭
let headers = {
    "Content-Type": "application/json"
};

// post
axios({
    method: 'post',
    url: url,
    data: data,
    headers: headers
})

參考資料

MDN HTTP 請求方法
MDN Content-Type
MDN Using Fetch
[第四週] 網路基礎 - HTTP、Request、Response
AJAX 完整解說系列：新增、更新、刪除（POST/PATCH/DELETE）
JavaScript基本功修練：Day29 - axios基本語法與練習(GET、POST請求)
axios 基本使用 & Config
Fetch & Promise 筆記五（Fetch 的使用注意事項）
RESTful API 練習 (XHR, Fetch詳解)
API 是什麼? RESTful API 又是什麼?

次回

做個此次系列的相關資料補充