了解fetch - Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的XMLHttpRequest的，在 JavaScript 脚本里面发出 HTTP 请求。 - 目前还没有被所有浏览器支持，如果考虑低版本浏览器的问题的话，引入https://github.com/github/fetch/blob/master/fetch.js即可兼容。      - Fetch API是基于promise的设计，返回的是Promise对象，它是为了取代传统xhr的不合理的写法而生的。 没有fetch时我们获取异步资源的方式： 使用fetch后我们获取异步资源的方式 比较： fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。fetch()通过数据流（Stream对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。 fetch的语法 示例： fetch的Response对象 1.同步属性 fetch()请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应。Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。 示例： 标头信息的属性有： 2.判断请求是否成功发出 第一种方法： fetch()发出请求以后，只有网络错误或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功。只有通过Response.status属性，得到HTTP 回应的真实状态码，才能判断请求是否成功 示例： 第二种方法： 判断response.ok是否为true 示例： 3.操作标头 Response 对象还有一Response.headers属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。Headers 对象可以使用for…of循环进行遍历 示例： 用来操作标头的方法有： 下面的有些方法可以修改标头，那是因为继承自 Headers 接口。对于 HTTP回应来说，修改标头意义不大，况且很多标头是只读的，浏览器不允许修改。 比较常用的也就是response.headers.get() const response = await fetch(url);response.headers.get()：根据指定的键名，返回键值。response.headers.has()： 返回一个布尔值，表示是否包含某个标头。response.headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。response.headers.append()：添加标头。response.headers.delete()：删除标头。response.headers.keys()：返回一个遍历器，可以依次遍历所有键名。response.headers.values()：返回一个遍历器，可以依次遍历所有键值。response.headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。response.headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。 4.读取Response对象内容的方法 const response = await fetch(url);response.text()：得到文本字符串，用于获取文本数据，比如 HTML 文件。response.json()：得到 JSON 对象。response.blob()：得到二进制 Blob 对象，例如读取图片文件，显示在网页上。response.formData()：得到 FormData 表单对象，主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。response.arrayBuffer()：得到二进制 ArrayBuffer 对象，主要用于获取流媒体文件。 5.创建副本（clone） Stream 对象只能读取一次，读取完就没了,这意味着五个读取方法，只能使用一个，否则会报错。 示例： Response 对象提供Response.clone()方法，创建Response对象的副本，实现多次读取。 示例： 6.底层接口 Response.body是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作 例如：用来分块读取内容，显示下载的进度 定制HTTP请求 fetch()的第一个参数是 URL，还可以接受第二个参数optionObj，作为配置对象，定制发出的 HTTP 请求。 HTTP 请求的方法、标头、数据体都在这个optionObj对象里面设置 fetch()请求的底层用的是 Request() 对象的接口，参数完全一样，因此上面的 API 也是 Request()的 API fetch()的第二个参数的完整API如下： 参数详解： 取消fetch请求 fetch()请求发送后，如果中途想要取消，需要使用AbortController对象 实例： 总结 到此这篇关于JS中fetch()用法详解的文章就介绍到这了,更多相关JS fetch()用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 您可能感兴趣的文章:JavaScript中fetch方法的使用示例全面详解JavaScript Fetch API请求和响应拦截详解Node.js 中使用fetch 按JSON格式发post请求的问题解析JavaScript使用Fetch的方法详解js fetch异步请求使用实例详解以fetch为例详解如何消除js异步的传染性