快捷導(dǎo)航

解讀請(qǐng)求方式Method和請(qǐng)求類型Content-Type

更新時(shí)間：2024年09月18日 10:19:24 作者：勿語(yǔ)&

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

1. 請(qǐng)求Content-Type （用來(lái)指定請(qǐng)求體或響應(yīng)體的類型）

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

2. 常用請(qǐng)求方式

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

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

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

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

Post：常用于新增，請(qǐng)求參數(shù)放在請(qǐng)求體中

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ā)送請(qǐng)求
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', 'This is a test file.');

fetch('/upload', {
  method: 'POST',
  body: formData // 不需要設(shè)置Content-Type，F(xiàn)ormData會(huì)自動(dòng)設(shè)置
})
.then(response => response.json())
.then(data => console.log(data));

Put：常用于修改，請(qǐng)求參數(shù)放在請(qǐng)求體中

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：常用于刪除，請(qǐng)求參數(shù)放在請(qǐng)求體中或URL中

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

// 刪除多條記錄時(shí)
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));