有用 - fetch基本使用（一）处理网络回应Response对象

# fetch基本使用（一）处理网络回应Response对象

fetch是用来替换XHR的一个很好的方案，它支持promise，还很容易被其他技术使用，如`Service Workers`。

## 基本使用

```js
// const data = { code: 200, msg: "ok" };
// response.end(JSON.stringify(data));
// 以上是nodejs部分，就是返回了一个json
// 小伙伴们可以自己去写一个server配合前端返回数据。
async function api() {
  try {
    const res = await fetch("http://localhost:8888", {
    });
    console.log(res)
    const data = await res.json()
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

api();
```

![](https://pic.rmb.bdstatic.com/bjh/240903/c08eec49327dc8b5852beeba88a731ac8018.png)
 可以看出res是一个Response对象，可以同步拿到ok，status, statusTest等。 然后通过res.json()拿到数据，如果不是json就用相应的方法去拿，如formDate

## Response

*   headers 拿到响应头的对象，entries后遍历 
![](https://pic.rmb.bdstatic.com/bjh/240903/26d0ea8cce27696a01538174e7ccf04c8267.png)

常用的就是get, 例如：`headers.get('Content-type')`

*   ok 包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299）
*   redirected 表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目
*   status 包含 Response 的状态码 （例如 `200` 表示成功）
*   statusText 包含了与该 Response 状态码一致的状态信息（例如，OK对应 `200`）
*   type 包含 Response 的类型（例如，`basic`、`cors`）
*   url 包含 Response 的URL。 **需要注意的是fetch对于http状态的处理，服务返回4xx或5xx的时候，我们并不会得到一个reject的promise。 可以拿status去做个一区间判断，或直接拿ok去做。** 

```js
if (response.ok) {
  
} else {
  
}
```

通过`const res = await fetch("http://localhost:8888", { });`我们知道res只是一个Response，我们要通过它的原型方法去拿数据。

`Response`对象根据服务器返回的不同类型的数据，提供了不同的读取方法。

*   `response.text()`：得到文本字符串。
*   `response.json()`：得到 JSON 对象。
*   `response.blob()`：得到二进制 Blob 对象。
*   `response.formData()`：得到 FormData 表单对象。
*   `response.arrayBuffer()`：得到二进制 ArrayBuffer 对象。

![](https://pic.rmb.bdstatic.com/bjh/240903/2b95698676ab1f237b6ad08f010f183f4601.png)

我们看下body`ReadableStream`类型，意思就是以流的方式读取内容。

```javascript
const response = await fetch('flower.jpg');
const reader = response.body.getReader();

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  console.log(`Received ${value.length} bytes`)
}
```

我们能不能多次消费一个response呢？答案是不可以的。

```javascript
let text =  await response.text()
let json =  await response.json()
```

官方提供了clone方法

```javascript
const response1 = await fetch('flowers.jpg')
const response2 = response1.clone()

const myBlob1 = await response1.blob()
const myBlob2 = await response2.blob()

image1.src = URL.createObjectURL(myBlob1)
image2.src = URL.createObjectURL(myBlob2)
```