Js 中fetch ⽅法
Js 中fetch ⽅法
fetch()⽅法定义在Window 对象以及WorkerGlobalScope 对象上，⽤于发起获取资源的请求，其返回⼀个Promise 对象，这个Promise 对象会在请求响应后被resolve ，并传回Response 对象。
描述
Promise<Response> fetch(input[, init])
input : 定义要获取的资源，其值可以是：
⼀个字符串，包含要获取资源的URL ，⼀些浏览器会接受 blob 和data 作为schemes 。
⼀个Request 对象。
init : ⼀个配置项对象，包括所有对请求的设置。可选的参数有：
method : 请求使⽤的⽅法，如GET 、POST 。
headers : 请求的头信息，形式为Headers 的对象或包含ByteString 值的对象字⾯量。
body : 请求的body 信息：可能是⼀个Blob 、BufferSource 、FormData 、URLSearchParams 或者USVString 对象，注意GET 或HEAD ⽅法的请求不能包含body 信息。
mode : 请求的模式，如cors 、no-cors 或者same-origin 。
credentials : 请求的credentials ，如omit 、same-origin 或者include ，为了在当前域名内⾃动发送cookie ，必须提供这个选项。cache : 请求的cache 模式: default 、no-store 、reload 、no-cache 、force-cache 或者only-if-cached 。
redirect : 可⽤的redirect 模式: follow ⾃动重定向，error 如果产⽣重定向将⾃动终⽌并且抛出⼀个错误，或者manual ⼿动处理重定向。referrer : ⼀个USVString 可以是no-referrer 、client 或⼀个URL ，默认是 client 。
referrerPolicy : 指定了HTTP 头部referer 字段的值，可能为以下值之⼀： no-referrer 、no-referrer-when-downgrade 、origin 、origin-when-cross-origin 、unsafe-url 。
integrity : 包括请求的subresource integrity 值，例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=。
返回⼀个Promise ，resolve 时回传Response 对象。
fetch 与jQuery.ajax 区别
当接收到⼀个代表错误的HTTP 状态码时，从fetch()返回的Promise 不会被标记为 reject ， 即使响应的HTTP 状态码是404或500，其会将Promise 状态标记为 resolve ，但是返回的Promise 会将resolve 的返回值的ok 属性设置为false ，仅当⽹络故障时或请求被阻⽌时，才会标记为reject 。
fetch()不会接受跨域cookies ，你也不能使⽤fetch()建⽴起跨域会话，其他域的Set-Cookie 头部字段将会被⽆视。fetch()不会发送cookies ，除⾮使⽤了credentials 的初始化选项。
实例
发起请求
发起⼀个简单的资源请求，对于fetch 请求返回⼀个Promise 对象，这个Promise 对象会在请求响应后被resolve ，并传回Response 对象。设置参数
通过init 配置对象设置参数，可以设置method 、headers 、body 、mode 、credentials 、cache 、redirect 、referrer 、referrerPolicy 、integrity 。Headers 对象
Headers.append(): 给现有的header 添加⼀个值, 或者添加⼀个未存在的header 并赋值。window.fetch("cdn.jsdelivr/npm/jquery@3/dist/jquery.min.js")
.then(res => console.log(res))
var headers = new Headers({
"accept": "application/javascript"
});
headers.append("accept", "application/xml");
headers.set("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36");window.fetch("cdn.jsdelivr/npm/jquery@3/dist/jquery.min.js", {
method: "GET",
headers: headers,
cache: 'no-cache',
})
.then(res => console.log(res))
Headers.delete(): 从Headers 对象中删除指定header 。
<(): 以ByteString 的形式从Headers 对象中返回指定header 的全部值。
Headers.has(): 以布尔值的形式从Headers 对象中返回是否存在指定的header 。
Headers.keys(): 以迭代器的形式返回Headers 对象中所有存在的header 名。
Headers.set(): 替换现有的header 的值, 或者添加⼀个未存在的header 并赋值。
Headers.values(): 以迭代器的形式返回Headers 对象中所有存在的header 的值。
响应处理
通过Response 对象对响应的数据作处理，包括获取响应状态以及响应体的处理等操作。
Response 对象
Response 对象的相关属性与⽅法：
js方法
Response.headers : 只读，包含此Response 所关联的Headers 对象。
Response.ok : 只读，包含了⼀个布尔值，标⽰该Response 成功，HTTP 状态码的范围在 200-299。
Response.statusText : 只读，包含了与该Response 状态码⼀致的状态信息。
Response.url : 只读，包含Response 的URL 。
Response.useFinalURL : 包含了⼀个布尔值，来标⽰这是否是该Response 的最终URL 。
Response.clone(): 创建⼀个Response 对象的克隆。
<(): 返回⼀个绑定了⽹络错误的新的Response 对象。
Response 实现了Body 接⼝，相关属性与⽅法可以直接使⽤：
Body.body : 只读，⼀个简单的getter ，⽤于暴露⼀个ReadableStream 类型的body 内容。
Body.bodyUsed : 只读，包含了⼀个布尔值来标⽰该Response 是否读取过Body 。
Body.arrayBuffer(): 读取Response 对象并且将它设置为已读，并返回⼀个被解析为ArrayBuffer 格式的Promise 对象，Responses 对象被设置为了stream 的⽅式，所以它们只能被读取⼀次。
Body.blob():
读取Response 对象并且将它设置为已读，并返回⼀个被解析为Blob 格式的Promise 对象。
Body.formData():
读取Response 对象并且将它设置为已读，并返回⼀个被解析为FormData 格式的Promise 对象。
Body.json():
读取Response 对象并且将它设置为已读，并返回⼀个被解析为JSON 格式的Promise 对象。
<():
读取Response 对象并且将它设置为已读，并返回⼀个被解析为USVString 格式的Promise 对象。
每⽇⼀题
参考
window.fetch("cdn.jsdelivr/npm/jquery@3/dist/jquery.min.js")
.then(res => ())
.then(data => console.log(data))
github/WindrunnerMax/EveryDay
segmentfault/a/1190000012740215
/zh-CN/docs/Web/API/Headers
/zh-CN/docs/Web/API/Response
/zh-CN/docs/Web/API/Fetch_API
/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。