fetch基本使用

一丶基本用法

fetch()的功能与XMLHttpRequest基本相同，但有三个主要的差异。

1. fetch()使用Promise，不使用回调函数，因此简化了写法。写起来更加的简洁。

2. fetch()采用模块化设计，API分散在多个对象上（Response对象，Request对象，Headers对象），更合理一些，相比之下XMLHttpRequest的API设计并不是很好，输入，输出，状态都在同一个接口管理，非常混乱。

3. fecth()通过数据流（Stream对象）处理数据，可以分块读取，有利于提高网站的性能，减少内存占用，对于多次请求大文件或者网速慢的场景相当有用。XMLHttpRequest对象不支持流数据，所有的数据必须放在缓存里，不支持分块处理，必须等待全部拿到之后，再一次性吐出来。

4. 在用法上，fetch()接受一个URL字符串作为参数，默认向该网址发送GET请求，返回一个Promise对象。

   fetch(url)
   .then(res=>res.json())
   .then(res=>{
       console.log(res)
   })
   .catch(error=>{
       console.log(error)
   })

   fetch()接收到的response是一个Stream对象，response.json()是一个异步操作，取出所有内容，并将其转为JSON对象。

5. Promise对象可以使用async/await写法，语义清晰。

   async function getJson(){
       let url='http://localhost:8080/getdata?id=1'
       try{
           let res=await fetch(url)
           return await res.json()
       }catch(error){
           console.log(error)
       }
   }

   二丶Response对象：处理HTPP响应

Response对象的同步属性

        fetch()请求成功以后，得到的是一个Response对象。它对应服务器的HTTP响应。

const res=await fetch(url)

Response包含的数据通过Stream接口异步读取，但它还有一些同步属性，对应HTTP回应的标头信息（Headers），可立即读取。

async function fetchText(){
    let res=await fetch(url)
    console.log(res.status)
    console.log(res.statusText)
}

res.status和res.status.statusText就是Response的同步属性，可立即读取。

标头信息有以下属性:

1. Response.ok属性返回一个Boolean值，表示请求是否成功，true对应的HTTP请求状态码200-299，false对应其他的状态码。

2. Response.status属性返回一个数字，表示HTTP响应的状态码（404 not found）.

3. Response.statusText属性返回一个字符串，表示HTTP响应的状态信息（例如请求成功以后，服务器返回“OK”）。

4. Response.url属性返回请求的URL。如果URL存在跳转，该属性返回的是最终的URL。

5. Response.type属性返回的是请求的类型。可能为以下值：

   • basic：普通请求，即同源请求。

   • cors：跨域请求。

   • error：网络错误，主要用于Service Worker。

   • opaque：如果fetch请求的type属性为no-cors，就会返回这个值。表示发出的是简单的跨域请求，类似<form>表单的那种跨域请求。

   • opaqueredirect：如果fetch请求的redirect属性设为manual，就会返回这个值。

6. Response.redirected属性返回一个Boolean值，表示请求是否有过重定向。

判断请求是否成功

fetch发出请求后，只有网络错误或无法连接时才会报错。即使服务器返回的状态码是4xx或5xx，fetcg也不会报错即Promise不会变为rejected状态。

只有通过Response.status属性得到HTTP响应的真实状态码才能判断请求是否成功。

async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

上面示例中，response.status属性只有等于 2xx （200~299），才能认定请求成功。这里不用考虑网址跳转（状态码为 3xx），因为fetch()会将跳转的状态码自动转为 200。

另一种方法是判断response.ok是否为true。

if (response.ok) {
  // 请求成功的逻辑
} else {
  // 请求失败的处理
}

Response.headers 属性

Response 对象还有一个Response.headers属性，指向一个Headers 对象，对应HTTP响应的所有标头。

Headers 对象可以使用for...of循环进行遍历。

Headers对象提供了以下方法来操作标头：

1. Headers.get()：根据指定的键名，返回键值。

2. Headers.has()： 返回一个布尔值，表示是否包含某个标头。

3. Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。

4. Headers.append()：添加标头。

5. Headers.delete()：删除标头。

6. Headers.keys()：返回一个遍历器，可以依次遍历所有键名。

7. Headers.values()：返回一个遍历器，可以依次遍历所有键值。

8. Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。

9. Headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。

上面的有些方法可以修改标头，那是因为继承自 Headers 接口。对于 HTTP 回应来说，修改标头意义不大，况且很多标头是只读的，浏览器不允许修改。

这些方法中，最常用的是response.headers.get()，用于读取某个标头的值。

let response =  await  fetch(url);  
response.headers.get('Content-Type')
// application/json; charset=utf-8

Headers.keys()和Headers.values()方法用来分别遍历标头的键名和键值。

// 键名
for(let key of myHeaders.keys()) {
  console.log(key);
}
// 键值
for(let value of myHeaders.values()) {
  console.log(value);
}

Headers.forEach()方法也可以遍历所有的键值和键名。

let response = await fetch(url);
response.headers.forEach(
  (value, key) => console.log(key, ':', value)
);

读取内容的方法

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。这5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。

1. response.text()：得到文本字符串。  response.text()可以用于获取文本数据，比如 HTML 文件。

   const response = await fetch('/users.html');
   const body = await response.text();
   document.body.innerHTML = body

2. response.json()：得到 JSON 对象。  response.json()主要用于获取服务器返回的 JSON 数据，前面已经举过例子了。

3. response.blob()：得到二进制 Blob 对象。

4. response.formData()：得到 FormData 表单对象。response.formData()主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。

5. response.arrayBuffer()：得到二进制 ArrayBuffer 对象。  response.arrayBuffer()主要用于获取流媒体文件。

   const audioCtx = new window.AudioContext();
   const source = audioCtx.createBufferSource();
   
   const response = await fetch('song.ogg');
   const buffer = await response.arrayBuffer();
   
   const decodeData = await audioCtx.decodeAudioData(buffer);
   source.buffer = buffer;
   source.connect(audioCtx.destination);
   source.loop = true;

Response.clone()

Stream 对象只能读取一次，读取完就没了。这意味着，前一节的五个读取方法，只能使用一个，否则会报错。

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

上面示例先使用了response.text()，就把 Stream 读完了。后面再调用response.json()，就没有内容可读了，所以报错。Response 对象提供Response.clone()方法，创建Response对象的副本，实现多次读取。

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

上面示例中，response.clone()复制了一份 Response 对象，然后将同一张图片读取了两次。Response 对象还有一个Response.redirect()方法，用于将 Response 结果重定向到指定的 URL。该方法一般只用在 Service Worker 里面，这里就不介绍了。

Response.body 属性

Response.body属性是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作。它可以用来分块读取内容，应用之一就是显示下载的进度。

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.body.getReader()方法返回一个遍历器。这个遍历器的read()方法每次返回一个对象，表示本次读取的内容块。这个对象的done属性是一个布尔值，用来判断有没有读完；value属性是一个 arrayBuffer 数组，表示内容块的内容，而value.length属性是当前块的大小。

三丶fetch的第二个参数

fetch()的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。

fetch(url, optionObj)

上面命令的optionObj就是第二个参数。HTTP 请求的方法、标头、数据体都在这个对象里面设置。下面是一些示例。

1. POST请求

   const response = await fetch(url, {
     method: 'POST',
     headers: {
       "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
     },
     body: 'foo=bar&lorem=ipsum',
   });
   
   const json = await response.json();

   配置对象里面的这些属性

• method:表示请求的方式（GET,POST ,DELETE,PUT,PATCH）

• headers：一个对象，用来设置HTTP 请求的标头。

• body：POST 请求的数据体。

注意，有些标头不能通过headers属性设置，比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成，无法修改。

1. 提交 JSON 数据

   const user =  { name:  'John', surname:  'Smith'  };
   const response = await fetch('/article/fetch/post/user', {
     method: 'POST',
     headers: {
      'Content-Type': 'application/json;charset=utf-8'
     }, 
     body: JSON.stringify(user) 
   });

   标头Content-Type要设成'application/json;charset=utf-8'。因为默认发送的是纯文本，Content-Type的默认值是'text/plain;charset=UTF-8'。

2. 提交表单

   const form = document.querySelector('form');
   
   const response = await fetch('/users', {
     method: 'POST',
     body: new FormData(form)
   })

3. 文件上传

        如果表单里面有文件选择器，可以用前一个例子的写法，上传的文件包含在整个表单里面，一起提交。另一种方法是用脚本添加文件，构造出一个表单，进行上传，请看下面的例子。

const input = document.querySelector('input[type="file"]');
const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');
fetch('/avatars', {
  method: 'POST',
  body: data
});

上传二进制文件时，不用修改标头的Content-Type，浏览器会自动设置。提交文件需要将数据添加到FormData实例中放在body里传到后端去。

1. 上传二进制数据

fetch()也可以直接上传二进制数据，将 Blob 或 arrayBuffer 数据放在body属性里面。

let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});