JavaScript Day28 - HTTP 网路请求

网路请求

之前在 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
})