《十四》HTML5 网络请求 Fetch

Fetch API 是近年来被提及将要取代 XHR 的技术新标准。Fetch API 基于 Promise，用于浏览器发起网络请求，它提供了一种更简洁的方式来进行网络通信。

Fetch API 只适用于浏览器，不适用于 Node.js。

基本用法：

调用 fetch() 函数发起网络请求。该函数接收两个参数，第一个参数是一个 URL，第二个参数是一个配置对象（可以在其中配置 methods、headers 等）。该函数返回一个Promise 对象。

fetch('https://baike.baidu.com/cms/home/hotLemmas.json')
	// res 响应对象包含了服务器返回的所有信息，可以使用响应对象的 ok 属性来判断请求是否成功以及使用 json()、text()、blob() 等方法来解析响应体
  .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(data => {
  	// 真正要获取的数据
    console.log(data)
  })
  .catch(error => {
    console.error('Error:', error)
  })

取消请求：

AbortController 是 JavaScript 最新版本中的特性，它是在 fetch 被实现之后出现的。 所有现代浏览器都支持它。

AbortController 包含一个 abort 方法，还包含一个可以传递给 fetch 的 signal 属性。 当调用 AbortController.abort() 时，fetch 请求就会被取消。

// 获取AbortController实例
const controller = new AbortController();
// 获取 signal属性
const signal = controller.signal;
  
fetch('https://baike.baidu.com/cms/home/hotLemmas.json', {
	// 将 signal作为fetch的参数之一
	signal,
})

// 取消请求
controller.abort()