介绍

Fetch()方法可以发出类似于XMLHttpRequest（XHR）的网络请求。Fetch API和XMLHttpRequest之间的主要区别（也称为XHR）是Fetch API使用Promises，可以编写更简洁的API调用，从而严格避免回调地狱并降低XMLHttpRequest的复杂性

使用之前使用XMLHttpRequest

在使用fetch之前，我们先可以了解下XMLHttpRequest，XMLHttpRequest需要设置两个侦听器来处理成功响应和错误响应情况，并调用open()和send()

function getAllPosts() {  let data = JSON.parse(this.responseText);  console.log(data);}let reqError = err => {  console.log("Error", err);};let req = new XMLHttpRequest();req.onload = getAllPosts;req.onerror = reqError;req.open("GET", ";, true); req.send();

现在看一下“Fetch之美”。让我们使用Fetch重写上面的代码。我们可以使用多种方式使用fetch方法，可以使用then方法或使用async / await方法。让我们看看如何做到这一点：

1、使用Async/Await：

使用try/catch，async / await使处理同步和异步错误相对容易：

async function getAllPosts() {          try {            let response = await  fetch("" );            const data = await response.json();            console.log(data);          } catch (err) {            console.log(err);          }      }

2、使用then

调用then方法的缺点就是容易在大量回调请求的时候造成回调地狱，很难维护代码

function getAllPosts() {        fetch(";)          .then(response => response.json())          .then(data => { console.log(data)})          .catch(err => {console.log(err);          });      }

当我们发出fetch请求时，响应会被指定为CORS类型，opaque或basic。这些响应类型指示资源的来源，这也让你知道如何处理响应：

解释：当来自同一来源的请求时，响应将具有基本类型，并且可以从响应中看到的内容没有任何限制；如果从其他来源发出请求，则响应将具有CORS类型。除了CORS响应将可以查看的标头限制为Cache-Control，Content-Language，Content-Type，Expires和Last-Modified外，CORS和基本响应类型几乎相同；opaque响应是针对来自其他来源的资源（不返回CORS标头）的请求。这种类型的响应读取不了返回的数据或查看请求的状态，这意味着无法检查请求是否成功。用fetch发出POST请求

除了可以从api获取数据之外，我们还可以使用Fetch方法执行其他操作。假设我们要向博客API添加一个新博客，我们也可以使用Fetch方法来完成该操作：

下面可以是一个表单提交方式：

<form id="postData">      <div>        <input type="text" name="" id="title" placeholder="Title" />      </div>      <div>        <textarea name="" id="body" cols="20" placeholder="Content" rows="5"></textarea>      </div>      <input type="submit" value="添加" /></form>

现在，我们有了一个用于添加新博客文章的表单，让我们编写一个脚本，该脚本会将数据发送到添加API的请求：

document.getElementById("postData").addEventListener("submit", addNewPost);        async function addNewPost(event) {        try {          event.preventDefault();//阻止默认行为          let tittle = document.getElementById("title").value;           let body = document.getElementById("body").value;           let response = await fetch("****",{              method: "POST",              headers: {"Content-Type": "application/json"},              body: JSON.stringify({ tittle: tittle, body: body })            }          );          const data = await response.json();          console.log(data);        } catch (err) {          console.log(err);        }      }

我们还可以使用Fetch处理文件上传，例如图像和文档：

document.getElementById("postData").addEventListener("submit", uploadfile);      async function uploadfile(event) {        try {          event.preventDefault();          const fileField = document.querySelector('input[type="file"]');          const formData = new FormData();          formData.append("avatar", fileField.files[0]);          let response = await fetch("...",{              method: "POST",              headers: { "Content-Type": "application/json" },              body: formData            });          const data = await response.json();          console.log(data);        } catch (err) {          console.log(err);        }    }

尽管fetch是用于发出网络请求的更好方法，新的fetch API似乎比XHR更快，更易于使用。毕竟，它是为了使我们能够以正确的方式处理AJAX请求而创建的。