JavaScript系列之Fetch的使用

文章の目录

• 一、基本特性
• 二、发送get请求
• 三、发送delete请求
• 四、发送post请求
• 五、发送put请求
• 六、响应数据格式
• 写在最后

---

一、基本特性

更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr的升级版

二、发送get请求

// GET参数传递-传统URL
fetch("http://localhost:3000/books?id=123", {
	method: "get"
})
	.then(function (data) {
		return data.text();
	})
	.then(function (data) {
		console.log(data);
	});
// express获取参数是
// GET参数传递-restful形式的URL
fetch("http://localhost:3000/books/456", {
	method: "get"
})
	.then(function (data) {
		return data.text();
	})
	.then(function (data) {
		console.log(data);
	});
// express获取参数是

三、发送delete请求

// DELETE请求方式参数传递
fetch("http://localhost:3000/books/789", {
	method: "delete"
})
	.then(function (data) {
		return data.text();
	})
	.then(function (data) {
		console.log(data);
	});
// express获取参数是

四、发送post请求

// POST请求传参
fetch("http://localhost:3000/books", {
	method: "post",
	body: "uname=lisi&pwd=123",
	headers: {
		"Content-Type": "application/x-www-form-urlencoded"
	}
})
	.then(function (data) {
		return data.text();
	})
	.then(function (data) {
		console.log(data);
	});
// express发送请求
// POST请求传参
fetch("http://localhost:3000/books", {
	method: "post",
	body: JSON.stringify({
		uname: "张三",
		pwd: "456"
	}),
	headers: {
		"Content-Type": "application/json"
	}
})
	.then(function (data) {
		return data.text();
	})
	.then(function (data) {
		console.log(data);
	});

五、发送put请求

// PUT请求传参
fetch("http://localhost:3000/books/123", {
	method: "put",
	body: JSON.stringify({
		uname: "张三",
		pwd: "789"
	}),
	headers: {
		"Content-Type": "application/json"
	}
})
	.then(function (data) {
		return data.text();
	})
	.then(function (data) {
		console.log(data);
	});
// express发送请求接收的是地址栏里的123，接收的是对象里的body

六、响应数据格式

• text()：将返回的数据处理成字符串；
• json()：返回结果和()一样；

fetch("http://localhost:3000/json")
	.then(function (data) {
		// return ();
		return data.text();
	})
	.then(function (data) {
		// ()
		// (typeof data)
		var obj = JSON.parse(data);
		console.log(obj.uname, obj.age, obj.gender);
	});

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！