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

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

基本使用

// 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();

可以看出res是一个Response对象，可以同步拿到ok，status, statusTest等。 然后通过res.json()拿到数据，如果不是json就用相应的方法去拿，如formDate

Response

• headers 拿到响应头的对象，entries后遍历

常用的就是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去做。

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 对象。

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

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呢？答案是不可以的。

let text =  await response.text();
let json =  await response.json();  // 报错

官方提供了clone方法

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