JS中fetch()用法实例详解
最新回答
沒伱的地方
2020-09-15 13:22:28
Fetch API可以处理跨域请求，并且可以处理数据流，有利于提高网站性能表现，减少内存占用。相较于XMLHttpRequest，Fetch API采用数据流处理数据，可以分块读取，支持异步操作，可以将返回的JSON字符串反序列化为对象，被包装成一个Promise。
Fetch API的使用方式如下：fetch(url) .then(...) .catch(...)。示例：fetch('网址') .then(response = response.json()) .then(json = console.log(json)) //获取到的json数据 .catch(err = console.log('Request Failed', err))。
Fetch API请求成功后，得到的是一个Response对象。它包含的数据通过Stream接口异步读取，但还包含一些同步属性，例如HTTP回应的标头信息，可以立即读取。Response对象还有一Response.headers属性，指向一个Headers对象，可以使用forof循环进行遍历。
Response对象提供Response.clone()方法，可以创建Response对象的副本，实现多次读取。例如：const response1 = await fetch('图片地址')；const response2 = response1.clone()；const myBlob1 = await response1.blob()；const myBlob2 = await response2.blob()；
Fetch API的底层接口是Response.body，返回一个ReadableStream对象，供用户操作。可以用来分块读取内容，显示下载的进度。例如：const response = await fetch('图片地址')；const reader = response.body.getReader()；while(true) { const {done, value} = await reader.read()；if (done) { break; } console.log(`Received ${value.length} bytes`)}。
Fetch API的第二个参数可以作为配置对象，定制发出的HTTP请求。例如：fetch(url, { method: "GET", headers: {"Content-Type": "text/plain;charset=UTF-8" }, body: undefined, mode: "cors", credentials: "same-origin", cache: "default", redirect: "follow", integrity: "", keepalive: false, signal: undefined });
Fetch API可以取消请求，使用AbortController对象。例如：let controller = new AbortController()；fetch(url, { signal: controller.signal})；controller.abort()方法用于发出取消信号。可以监听controller.signal的值改变，触发abort事件。
热门标签
