整理学习——fetch

简单说明

fetch()函数和promise对象都是用于异步编程的。异步编程最主要的目的就是解决有可能阻塞运行的代码。将阻塞的代码在子线程进行计算运行，而不阻塞主要运行的主线程，并在运行完毕了再运行处理结果的函数。

fetch(resource[, option])

从WindowOrWorkerGlobalScope用Mixin模式 ¹ 的fetch(input[, option])是从网络上获取资源的函数。它返回一个一旦完成就可以得到response的promise。这个promise在你的请求中会被解析为一个Response对象以供后续的then函数使用。promise对象不会拒绝HTTP错误，它只会拒绝网络错误，所以在后续的then函数中需要判断HTTP错误。
Window和WorkerGlobalScope都实现了WorkerOrGlobalScope。这意味着基本在任何场景下只要你想获取资源，都可以使用位于WorkerOrGlobalScope中的fetch()方法等。
当发生网络错误时，fetch()的promise会拒绝。比如权限问题或者其他问题。fetch的promise不会拒绝HTTP错误，即404、505这些HTTP错误。所以在开发的时候需要在then中添加对Response.ok或Response.status的判断。
fetch()方法由Content Security Policy ²的content-src指令控制，而不是由请求返回的资源所控制。

参数

resource

定义获取资源的目标地址

• USVString³字符串，包含要获取资源的URL。一些浏览器可以接收blob:和data: 作为schemes
• Request对象

option

配置对象，包括所有对请求的设置。以下是可选参数

method

请求的方法。GET、POST。默认是GET方法

在火狐65的环境下，Head或者Get方法无法设置Origin标头

headers

任何你想添加到你的请求的头(header)，包括一个Headers对象或者包含ByteString值的USVString。

body

任何你想添加到你的请求的body（Blob、BufferSource、FormData、URLSearchParams或者一个USVString对象）

mode

请求的模式，是一个只读属性，有四种模式分别为：

• cors：运行跨域请求，例如访问第三方的API。这些跨域请求都遵循CORS协议⁴，即HTTP访问控制。同时响应中应该只显示一组有限的头header，并且body部分可读。
• no-cors：保证其方法只有HEAD、GET或POST，并且保证其headers是除了简单头部以外的headers。如果任何ServiceWorkers拦截这些请求，他们不会添加或覆盖任何headers除了简单头部。需要注意的是JavaScript不会读取Response的任何属性。这样可以确保ServiceWorkers不会影响Web语义，并防止因跨域泄露数据而导致的安全性和隐私问题。
• same-origin：如果请求的对象非同源并且使用了该模式，那么结果显而易见会是个错误。你可以用这个模式来确认一个请求是同源的。
• navigate：表示这是一个浏览器的页面切换请求。该请求仅在浏览器切换页面时创建，该请求应该返回HTML

credentials

只读属性，表示是否需要在跨域请求中向其他域发送cookie。有以下值：

• omit：不发送也不接受任何cookie
• same-origin：默认值。如果资源目标地址与响应脚本在同源时才发送验证信息（例如cookie、基本的http身份验证等）