解读请求方式Method和请求类型Content-Type_Javascript

1. 请求content-type （用来指定请求体或响应体的类型）

application/x-www-form-urlencoded：参数以键值对形式传递，适合普通表单提交。（常用）
multipart/form-data：用于文件上传，也可以包含其他键值对。（常用）
application/json：用于发送json格式的数据，广泛应用于api交互。（常用）
text/plain：用于发送纯文本数据。
application/xml 或 text/xml：用于发送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()}`;

// 发送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 发送请求
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));