JS的fetch解析(js fetch用法)
写在前面
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。
浏览器原生提供这个对象
基本用法
fetch()的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。
（1）fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
（2）fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
（3）fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。
在用法上，fetch()接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象
fetch(url) .then(...) .catch(...) 复制代码
Promise 可以使用 await 语法改写，使得语义更清晰。
async function getJSON() { let url = 'https://github.com'; try { let response = await fetch(url); return await response.json(); } catch (error) { console.log('Request Failed', error); } } 复制代码上面示例中，await语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误。
fetch()的第二个参数：定制 HTTP 请求
fetch()的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。
fetch(url, optionObj) 复制代码
上面命令的optionObj就是第二个参数。
HTTP 请求的方法、标头、数据体都在这个对象里面设置
（1）POST 请求
const response = await fetch(url, { method: 'POST', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8", }, body: 'foo=bar&lorem=ipsum', }); const json = await response.json(); 复制代码上面示例中，配置对象用到了三个属性。
method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。
headers：一个对象，用来定制 HTTP 请求的标头。
body：POST 请求的数据体。
注意，有些标头不能通过headers属性设置，比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成，无法修改。
（2）提交 JSON 数据
const user = { name: 'Liming', age: '15' }; const response = await fetch('/article/fetch/post/user', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); 复制代码上面示例中，标头Content-Type要设成'application/json;charset=utf-8'。因为默认发送的是纯文本，Content-Type的默认值是'text/plain;charset=UTF-8'。
（3）提交表单
const form = document.querySelector('form'); const response = await fetch('/users', { method: 'POST', body: new FormData(form) }) 复制代码（4）文件上传
如果表单里面有文件选择器，可以用前一个例子的写法，上传的文件包含在整个表单里面，一起提交。
另一种方法是用脚本添加文件，构造出一个表单，进行上传.
上传二进制文件时，不用修改标头的Content-Type，浏览器会自动设置。
（5）直接上传二进制数据
fetch()也可以直接上传二进制数据，将 Blob 或 arrayBuffer 数据放在body属性里面
作者：前端郭德纲
链接：https://juejin.cn/post/7029250950132924447