解讀請求方式Method和請求類型Content-Type

更新時間：2024年09月18日 10:19:24 作者：勿語&

HTTP請求中,Content-Type頭部用于指定請求體或響應體的類型,常見的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請求方式包括Get、Post、Put、Delete

1. 請求Content-Type （用來指定請求體或響應體的類型）

application/x-www-form-urlencoded：參數以鍵值對形式傳遞，適合普通表單提交。（常用）
multipart/form-data：用于文件上傳，也可以包含其他鍵值對。（常用）
application/json：用于發(fā)送JSON格式的數據，廣泛應用于API交互。（常用）
text/plain：用于發(fā)送純文本數據。
application/xml 或 text/xml：用于發(fā)送XML格式的數據。

2. 常用請求方式

Get：常用于查詢，一般拼接在url后面

如：http://example.com/api/resource?key1=value1&key2=value2

// 構造查詢字符串,形如：key1=value1&key2=value2
const queryParams = new URLSearchParams();
queryParams.append('key1', 'value1');
queryParams.append('key2', 'value2');
// 構造完整的URL
const url = `http://example.com/api/resource?${queryParams.toString()}`;

// 發(fā)送GET請求
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Post：常用于新增，請求參數放在請求體中

Content-Type = ‘application/json’

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Content-Type = ‘application/x-www-form-urlencoded’

const queryParams = new URLSearchParams();
queryParams.append('key1', 'value1');
queryParams.append('key2', 'value2');

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: queryParams.toString() 
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Content-Type = ‘multipart/form-data’

// JavaScript 發(fā)送請求
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', 'This is a test file.');

fetch('/upload', {
  method: 'POST',
  body: formData // 不需要設置Content-Type，FormData會自動設置
})
.then(response => response.json())
.then(data => console.log(data));

Put：常用于修改，請求參數放在請求體中

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch('/api/users', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Delete：常用于刪除，請求參數放在請求體中或URL中

// 刪除單條記錄時
fetch('/api/users/1', {
  method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 刪除多條記錄時
const ids=[1,2,3,4]
fetch('/api/users', {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(ids)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));