HTTP 的数据传输方式和编码格式

我们向后端发起 http 请求时，会要求指定数据传输的方式，通常情况下包含如下 5 种

• query
• url param
• form-urlencoded
• form-data
• json

下⾯我会讲述之间的区别，并同时列举 axios 和 fetch 的写法。

url param

这个是最简单的，⼀般⽤在 GET 请求中，就是直接在 url 后⾯加上参数，例如：

http://localhost:3000/post/7231564187255881765

这种⼀般⽤于请求某篇⽂章之类的。

axios

axios.get("http://localhost:3000/post/7231564187255881765")

fetch

fetch("http://localhost:3000/post/7231564187255881765")

query

这种也⼀般⽤在 GET 请求中，就是利⽤ & 来分割数据，例如：

http://localhost:3000/posts?page=1&size=10

般 GET 请求需要传递多个参数都会⽤这种，⽐如上⽅例⼦中的分⻚请求。

这种请求如果涉及到中⽂或特殊字符需要进⾏编码才⾏，⼀般可以⽤ JavaScript

encodeURLComponent API 进⾏处理， 或者 query-string 或 qs 这两个 npm 库。

不过现在浏览器都⽐较智能了，已经会⾃动帮你进⾏特殊编码了，所以就算你不进⾏处理也

没关系。

axios

axios 已经帮你做好编码处理了，你可以直接写。

axios.get("http://localhost:3000/user", {
	params: {
	name: "史蒂夫",
	},
});

fetch

fetch 已经帮你做好编码处理了，但为了兼容性和可靠性，也可以显式地使⽤

encodeURIComponent 对 URL 的各个部分进⾏编码。

fetch(`http://localhost:3000/person/?name=${encodeURIComponent("史蒂夫")}`);
// 或者
fetch(`http://localhost:3000/person/?name=史蒂夫`);

form-urlencoded

这种也⼀般⽤在 POST 请求中，form 直接提交数据就是这种，它其实和 query 差不多，都

是利⽤ & 来拼接数据，也都要进⾏编码，只不过 form-urlencoded 把这个字符串放在

body ⾥了，然后指定 Content-Type 是 application/x-www-form-urlencoded ，不过这

种方式⽤的相对较少，⼤多数后端都会要求传 JSON。

axios

axios 会⾃动帮你把 Content-Type 指定为 application/x-www-form-urlencoded ，所以

直接在 body ⾥放⼊数据即可

axios.post("http://localhost:3000/user", "id=123&name=suemor");

但这么写不太优雅，⼀般会配合 qs 这个库来使⽤pnpm i qs

import qs from "qs";

axios.post(`http://localhost:3000/user`,qs.stringify({ 
	id: 123,
	name: "suemor",
}));

fetch

注意 fetch 并没有帮你指定 Content-Type，需要⼿动指定为 application/x-www-form-urlencoded

import qs from "qs";

fetch(`http://localhost:3000/user`, {
	method: "POST",
	body: "id=123&name=suemor",
	headers: {
	"Content-Type": "application/x-www-form-urlencoded",
	},
});

// 或者

fetch(`http://localhost:3000/user`, {
	method: "POST",
	body: qs.stringify({ id: 123, name: "suemor" }),
	headers: {
	"Content-Type": "application/x-www-form-urlencoded",
	},
});

json

这种也⼀般⽤在 POST 请求中，是我们 POST 请求最常⻅的⼀种传输⽅式，直接传递

JSON，且⽆需编码，需要指定 Content-Type 为 application/json 。

axios

axios 会⾃动帮你把 Content-Type 指定为 application/json ，且⾃动包了⼀层

JSON.stringify ，你只要在第⼆参数中传⼊ JavaScript 对象即可。

axios.post(`http://localhost:3000/user`, { id: 123, name: "suemor" });
// 等价于
axios.post(`http://localhost:3000/user`, `{"id":123,"name":"suemor"}`, {
	headers: {
	"Content-Type": "application/json",
	},
});

fetch

fetch 就没 axios 那么智能了，需要⼿动指定 Content-Type 和 JSON.stringify

fetch(`http://localhost:3000/user`, {
	method: "POST",
	body: JSON.stringify({ id: 123, name: "suemor" }),
	headers: {
	"Content-Type": "application/json",
	},
});

form-data

这种也⽤在 POST 请求中，⼀般⽤于⽂件上传， --------- + 随机数 做为分隔符，⽆需编

码，需要指定 Content-Type 为 multipart/form-data 。

axios

axios 会⾃动添加 Content-Type 为 multipart/form-data

function App() {

	const upLoadHandler = (event: ChangeEvent<HTMLInputElement>) => {
		const formData = new FormData();
		const fileList = event.target.files;
		if (!fileList) return;
		formData.set("File", fileList[0]);
		formData.set("id", "123");
		axios.post(`http://localhost:3000/file`, formData);
	};

	return <input type="file" name="file" onChange={upLoadHandler} />;
}

fetch

fetch 会⾃动添加 Content-Type 为 multipart/form-data ，写法与 axios 类似

function App() {
	const upLoadHandler = (event: ChangeEvent<HTMLInputElement>) => {
		const formData = new FormData();
		const fileList = event.target.files;

		if (!fileList) return;
		formData.set("File", fileList[0]);
		formData.set("id", "123");

		fetch(`http://localhost:3000/file`, {
			method: "POST",
			body: formData,
		});
	};
	return <input type="file" name="file" onChange={upLoadHandler} />;
}