Fetch 也是前后端通信的一种方式。是 Ajax 的一种替代方案。

Fetch 的优缺点：

Fetch 的优点：

1. 原生就有 fetch 对象，使用简单。
2. 基于 Promise。

Fetch 的缺点：

1. 兼容性没有 Ajax 好。
2. 原生没有提供 abort、timeout等机制。

fetch() 函数的使用：

fetch() 函数是浏览器原生提供的一个全局函数，可以直接调用。接收两个参数，第一个参数是要获取的资源的地址，第二个参数是其他初始化的参数（例如：method 表示请求方法；headers 表示请求头信息；body 表示请求体信息，默认是以 multipart/form-data 形式发送数据）。返回值是一个 Promise 对象。

// GET 请求
fetch('http://123.207.32.32:8000/home/multidata')
	.then(res => {
		// res.ok 如果为 true，就表示可以读取数据了，不用再去判断 HTTP 状态码了
		if (res.ok) {
			// res.body 是一个可读流，无法直接读取到。可以通过 res.json() 或者 res.text() 来获取 JSON 格式或者普通文本格式的数据，返回的都是一个 Promise 对象
			// res.body 只能读取一次，读取过一次之后 res.bodyUsed 就会变为 true，无法再读取到
			return res.json()
		}
	})
	.then(res => {
		// 真正要获取的数据
		console.log(res)
	})
	.catch(err => {
		console.log(err)
	})

// POST 请求发送 JSON 形式的数据
fetch(
	'http://123.207.32.32:1888/02_param/postjson',
	{
		method: 'POST',
		headers: {
			'Content-type': 'application/json',
		},
		body: JSON.stringify({name: 'Lee', age: 18})
	}
)
	.then(res => {
		if (res.ok) {
			return res.json()
		}
	})
	.then(res => {
		// 真正要获取的数据
		console.log(res)
	})
	.catch(err => {
		console.log(err)
	})