Fetch
Fetch 是基于 Promise 语法结构,而且它的设计足够低阶,这表示它可以在实际需求中进行更多的弹性设计
Fetch API 规范明确了用户代理获取资源的语义。原生支持 Promise
1,调用方便,符合语义化。可配合使用 ES2016 中的 async
/ await
语法,更加优雅。
一个基本的 fetch 请求
这里我们通过网络获取一个 JSON 文件并将其打印到控制台。
最简单的用法是只提供一个参数用来指明想 fetch()
到的资源路径
然后返回一个包含响应结果的promise(一个 Response
对象)
|
Request 对象
Headers 对象
允许您对HTTP请求和响应头执行各种操作。
这些操作包括检索,设置,添加和删除。
添加
append()
方法可以追加一个新值到已存在的headers上,或者新增一个原本不存在的header。
|
name:要追加给Headers对象的HTTP header名称.
value:要追加给Headers对象的HTTP header值.
删除
delete()
方法可以从Headers对象中删除指定header.
|
name:需删除的HTTP header名称.
示例
|
也可以直接写在内部
|
Response对象
呈现了对一次请求的响应数据。
Response.text()
读取 response,并以文本形式返回 response
|
Response.json()
接收一个 Response
流,并将其读取完成
它返回一个 Promise,Promise 的解析 resolve 结果是将文本体解析为 JSON
|
返回一个被解析为JSON
格式的promise对象
基本用法
|
- 第一个参数是请求的url
- 第二个参数 options对象 常用配置
method
: 请求使用的方法,如GET
、POST
。headers
: 请求的头信息,形式为Headers
的对象或包含ByteString
值的对象字面量。body
: 请求的 body 信息- 注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode
: 请求的模式,如cors、
no-cors
或者same-origin。
same-origin
表示必须同源,绝对禁止跨域,这个是老版本浏览器默认的安全策略。no-cors
这个就很特殊了,字面意思是禁止以CORS的形式跨域,其实它的效果是,对外域的请求可以发送,外域服务器无论设不设Access-Control-Allow-Origin: *
都会接收请求并处理请求,但是浏览器不接收响应,即使外域返回了内容,浏览器也当做没接到
Post请求示例
要创建一个 POST
请求,或者其他方法的请求,我们需要使用 fetch
选项:
- method : HTTP 方法,例如
POST
, - body: request body,其中之一:
- 字符串(例如 JSON 编码的),
FormData
对象,以form/multipart
形式发送数据,Blob
/BufferSource
发送二进制数据,- URLSearchParams,以
x-www-form-urlencoded
编码形式发送数据,很少使用。
JSON 形式是最常用的。
例如,下面这段代码以 JSON 形式发送 user
对象:
|
示例2
|
请注意,如果请求的 body
是字符串,则 Content-Type
会默认设置为 text/plain;charset=UTF-8
。
但是,当我们要发送 JSON 时,我们会使用 headers
选项来发送 application/json
,这是 JSON 编码的数据的正确的 Content-Type
。