介绍

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

使用之前

• 使用XMLHttpRequest

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

<code>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", "https://xxxxx", true); 
req.send();/<code>

• 使用Fetch

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

1、使用Async/Await：

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

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

2、使用then

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

<code>function getAllPosts() {
        fetch("https://xxxxx")
          .then(response => response.json())
          .then(data => { console.log(data)})
          .catch(err => {console.log(err);
          });
      }/<code>

基本响应类型

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

• 解释：

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

用fetch发出POST请求

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

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

<code>/<code>

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

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

      }/<code>

使用Fetch上传文件

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

<code>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);
        }
    }/<code>

总结

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

閱讀更多 最美分享Coder 的文章

關鍵字: 区别 理解 简单