meface/docs/article/web/js/fetch.md

---
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`。

![image-20201208100147317](../images/image-20201208100147317.png)



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
  });
```

![image-20201225164237005](../images/image-20201225164237005.png)

[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 的方式，所以它们只能被读取一次。

![image-20201208095117067](../images/image-20201208095117067.png)



### 参考文章

[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`