114 lines
7.5 KiB
Markdown
114 lines
7.5 KiB
Markdown
---
|
||
title: fetch API接口
|
||
date: 2020-12-25
|
||
author: ac
|
||
tags:
|
||
- fetch
|
||
- JavaScript
|
||
categories:
|
||
- Web
|
||
---
|
||
|
||
> 在使用JavaScript编写Web代码时，有许多Web API可供调用。其中Fetch API提供了一个获取资源的接口（包括跨域请求），用于访问和操作HTTP请求的一些具体部分，如请求头`Headers`、请求`Request`、响应`Response`和参数`Body`。
|
||
|
||
<!-- more -->
|
||
|
||
## fetch API接口
|
||
|
||
### 基本概念
|
||
|
||
Fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案，是原生的js。可以在请求中的type查看到fetch请求的类型是`fetch`，普通的ajax请求的类型是`xhr`。
|
||
|
||
|
||
|
||
|
||
|
||
Fetch API 是基于`Promise`的。核心在于对HTTP接口的抽象，包含 [`Request`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request)，[`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)，[`Headers`](https://developer.mozilla.org/zh-CN/docs/Web/API/Headers)，[`Body`](https://developer.mozilla.org/zh-CN/docs/Web/API/Body)，以及用于初始化异步请求的 [`global fetch`](https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch)。
|
||
|
||
`global fetch`是位于 [`WorkerOrGlobalScope`](https://developer.mozilla.org/zh-CN/docs/Web/API/WorkerOrGlobalScope) 中的一个 mixin 的 **`fetch()`** 方法，返回一个promise实例，该promise会在请求响应后被resolve，并传回`Response`对象。
|
||
|
||
> window和WorkerGlobalScope都实现了WorkerOrGlobalScope，即window中存在fetch()方法，可以在任何地方调用fetch()方法。
|
||
|
||
从fetch()返回的Promise 不会被标记为`reject`（即使响应的HTTP状态码是404或500），而是将Promise的状态变为`resolve`，但返回的response中的`ok`属性为`false`。仅当网络故障时或请求被阻止时，才会标记为`reject`。
|
||
|
||
### 基本语法
|
||
|
||
语法：fetch(input[,init])
|
||
|
||
参数：
|
||
|
||
- input：获取资源的URL，或是一个Request对象
|
||
- init：初始化参数（一个配置对象），可选参数有：
|
||
- method： 请求方式，GET, POST, PUT, DELETE, etc.
|
||
- headers：请求的头信息。可以指定参数类型`Content-Type`。
|
||
- body：请求参数。 需要与header中的 'Content-Type' 匹配。
|
||
- 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` (手动处理重定向). 在Chrome中默认使用`follow（`Chrome 47之前的默认值是`manual`）
|
||
- referrer： `no-referrer、``client`或一个 URL。默认是 `client`。
|
||
- referrerPolicy： 指定了HTTP头部referer字段的值。可能为以下值之一： `no-referrer、` `no-referrer-when-downgrade、` `origin、` `origin-when-cross-origin、` `unsafe-url 。`
|
||
- integrity：包括请求的 [subresource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) 值。
|
||
|
||
如果请求头`Headers`中没有设置 `Content-Type` 值，发送的请求也会自动设值。因为request和response（包括 `fetch()` 方法）都会试着自动设置 `Content-Type`。
|
||
|
||
`Content-Type`的可选值：
|
||
|
||
- `text/html`：HTML文档标记
|
||
- `image/jpeg`：JPEG图片标记
|
||
- `image/gif`：GIF图片标记
|
||
- `application/javascript`：js文档标记
|
||
- `application/xml`：xml文件标记，如果是text/xml的话，将忽略xml数据里的编码格式
|
||
- `multipart/form-data`：文件上传
|
||
- `application/x-www-form-urlencoded`：普通表单
|
||
|
||
### 基本使用
|
||
|
||
一个基本的`fetch`请求设置起来很简单，最简单的用法是只提供一个资源路径的URL，然后返回一个包含响应结果的`promise`（一个`Response`对象）。
|
||
|
||
```javascript
|
||
fetch('http://localhost:8080/geoserver/wfs')
|
||
.then(function(response){
|
||
//handle HTTP response
|
||
return response.json();
|
||
})
|
||
.then(function(value){
|
||
//do something
|
||
});
|
||
```
|
||
|
||
|
||
|
||
[Response](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) 实例是在 `fetch()` 处理完 promise 之后返回的。其包含以下属性（只读）：
|
||
|
||
- `Response.headers`：包含此 Response 所关联的 [`Headers`](https://developer.mozilla.org/zh-CN/docs/Web/API/Headers) 对象。
|
||
- `Response.ok`：包含了一个布尔值，标示该 Response 成功
|
||
- `Response.redirected`：表示该Response是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。
|
||
- `Response.status`：包含 Response 的状态码（HTTP 状态码的范围在 200-299）
|
||
- `Response.statusText`：包含了与该 Response 状态码一致的状态信息（例如，OK对应 `200`）。
|
||
- `Response.type`：包含Resposne的类型（例如：`basic`、`cors`）
|
||
- `Repsonse.url`：包含 Response 的URL。
|
||
- `Response.body`：一个简单的 getter，用于暴露一个 [`ReadableStream`](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream) 类型的 body 内容。
|
||
- `Response.bodyUsed`：包含了一个[`布尔值`](https://developer.mozilla.org/zh-CN/docs/Web/API/Boolean)来标示该 Response 是否读取过 [`Body`](https://developer.mozilla.org/zh-CN/docs/Web/API/Body)。
|
||
|
||
|
||
|
||
不管是请求还是响应都能够包含 `body` 对象。而 [Request](https://developer.mozilla.org/zh-CN/docs/Web/API/Request) 和[Response](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)也都实现了`Body` 类的一些方法以获取body的内容。例如：
|
||
|
||
- `Response.json()`：读取 [`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) 对象并且将它设置为已读，并返回一个被解析为 [`JSON`](https://developer.mozilla.org/zh-CN/docs/Web/API/JSON) 格式的 Promise 对象。
|
||
- `Response.text()`：读取 [`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) 对象并且将它设置为已读，并返回一个被解析为 [`USVString`](https://developer.mozilla.org/zh-CN/docs/Web/API/USVString) 格式的 Promise 对象。
|
||
- `Response.formData()`：读取[`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) 对象并且将它设置为已读，并返回一个被解析为 [`FormData`](https://developer.mozilla.org/zh-CN/docs/Web/API/FormData) 格式的 Promise 对象。
|
||
- `Response.blob()`：读取 [`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) 对象并且将它设置为已读，并返回一个被解析为 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 格式的 Promise 对象。
|
||
- `Response.arrayBuffer()`：读取 [`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) 对象并且将它设置为已读，并返回一个被解析为 [`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/API/ArrayBuffer) 格式的 Promise 对象。
|
||
|
||
> 因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次。
|
||
|
||
|
||
|
||
|
||
|
||
### 参考文章
|
||
|
||
[1] [Fetch 接口](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API#Fetch_%E6%8E%A5%E5%8F%A3) `https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API`
|
||
|
||
[2] [Response](https://developer.mozilla.org/zh-CN/docs/Web/API/Response) `https://developer.mozilla.org/zh-CN/docs/Web/API/Response` |