JavaScript Fetch API

Fetch API 允许网页浏览器向网络服务器发起 HTTP 请求。在 JavaScript 中，Fetch API 被引入到 ES6 版本中。它是 XMLHttpRequest (XHR) 对象的一种替代方案，后者常用于向服务器发出 'GET', 'POST', 'PUT', 或 'DELETE' 请求。

浏览器的 window 对象默认包含 Fetch API。

Fetch API 提供了 fetch() 方法，可以用来异步地跨网络访问资源。

fetch() 方法允许你向服务器发出请求，并返回一个 Promise。之后，你需要解析这个 Promise 才能得到来自服务器的响应。

语法

你可以按照以下语法在 JavaScript 中使用 fetch() API：

window.fetch(URL, [options]);

或

fetch(URL, [options]);

参数

fetch() 方法接受两个参数：

URL：这是你要发出请求的 API 终端。
[options]：这是一个可选参数。它是一个对象，包含方法、头信息等键值对。

返回值

它返回一个 Promise，你可以使用 'then...catch' 块或异步处理。

使用 'then...catch' 块处理 Fetch() API 响应

JavaScript Fetch() API 返回一个 Promise，你可以使用 'then...catch' 块来处理它。

按照以下语法使用 fetch() API 和 'then...catch' 块：

fetch(URL)
.then(data => {
   // 处理数据
})
.catch(err=> {
   // 处理错误
});

在上述语法中，你可以在 'then' 块中处理 'data' 并在 'catch' 块中处理错误。

示例

在下面的代码中，我们使用 fetch() API 从给定的 URL 获取数据。它返回一个我们在 'then' 块中处理的 Promise。

首先，我们将数据转换为 JSON 格式。然后，将数据转换为字符串并在网页上打印出来。

<html>
<body>
   <div id="output"></div>
   <script>
      const output = document.getElementById('output');
      const URL = 'https://jsonplaceholder.typicode.com/todos/5';
      fetch(URL)
   .then(res => res.json())
   .then(data => {
      output.innerHTML += "从 API 获取的数据是: " + "<br>";
      output.innerHTML += JSON.stringify(data);
      });
   </script>
</body>
</html>

输出：

从 API 获取的数据是:
{"userId":1,"id":5,"title":"laboriosam mollitia et enim quasi adipisci quia provident illum","completed":false}

异步处理 Fetch() API 响应

你也可以使用 async/await 关键字异步处理 fetch() API 返回的 Promise。

语法

用户可以按照以下语法使用 async/await 关键字与 fetch() API 结合：

let data = await fetch(URL);
data = await data.json();

在上述语法中，我们使用 'await' 关键字暂停代码执行直到 Promise 完成。之后，我们再次使用 'await' 关键字与 data.json() 结合，直到它将数据转换为 JSON 格式。

示例

在下面的代码中，我们定义了名为 getData 的异步函数，使用 fetch() API 从给定的 URL 获取待办事项列表数据。然后，我们将数据转换为 JSON 并在网页上打印输出。

<html>
<body>
   <div id="output"></div>
   <script>
      async function getData() {
         let output = document.getElementById('output');
         let URL = 'https://jsonplaceholder.typicode.com/todos/6';
         let data = await fetch(URL);
         data = await data.json();
         output.innerHTML += "从 API 获取的数据是: " + "<br>";
         output.innerHTML += JSON.stringify(data);
      }
      getData();
   </script>
</body>
</html>

输出：

从 API 获取的数据是:
{"userId":1,"id":6,"title":"qui ullam ratione quibusdam voluptatem quia omnis","completed":false}

Fetch() API 的选项

你也可以传递包含键值对的对象作为第二个参数。

语法

按照以下语法将选项传递给 Fetch() API：

fetch(URL, {
    method: "GET",
    body: JSON.stringify(data),
    mode: "no-cors",
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
        "Content-Type": "application/json",
    },
    redirect: "follow",
})

选项

这里给出了一些可以传递给 fetch() API 的选项：

method：它接受 'GET', 'POST', 'PUT', 和 'DELETE' 方法之一作为值，取决于你想发出哪种类型的请求。
body：用于以字符串格式传递数据。
mode：出于安全原因，它接受 'cors', 'no-cors', 'same-origin' 等值。
cache：它接受 '*default', 'no-cache', 'reload' 等值。
credentials：它接受 'same-origin', 'omit' 等值。
headers：你可以通过此属性向请求中传递头部信息。
redirect：如果你想在完成请求后让用户重定向到其他网页，可以使用重定向属性。

示例：发出 GET 请求

在下面的代码中，我们将 "GET" 方法作为选项传递给 fetch() API。

Fetch() API 从给定的 API 终端获取数据。

<html>
<body>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      let options = {
         method: 'GET',
      };
      let URL = "https://dummy.restapiexample.com/api/v1/employee/2";
      fetch(URL, options)
         .then(res => res.json())
         .then(res => {
            output.innerHTML += "响应的状态是 - " + res.status + "<br>";
            output.innerHTML += "API 返回的消息是 - " + res.message + "<br>";
            output.innerHTML += "API 返回的数据是 - " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "API 返回的错误是 - " + JSON.stringify(err);
         });
   </script>
</body>
</html>

输出：

响应的状态是 - success
API 返回的消息是 - Successfully! Record has been fetched.
API 返回的数据是 - {"id":2,"employee_name":"Garrett Winters","employee_salary":170750,"employee_age":63,"profile_image":""}

示例（发出 POST 请求）

在下面的代码中，我们创建了一个包含 emp_name 和 emp_age 属性的员工对象。

同时，我们创建了一个包含 method, headers, 和 body 属性的选项对象。我们将 'POST' 作为 method 的值，并将员工对象转换为字符串后作为 body 的值。

我们使用 fetch() API 向 API 终端发出 POST 请求以插入数据。发出 POST 请求后，你可以在网页上看到响应。

<html>
<body>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      let employee = {
         "emp_name": "Sachin",
         "emp_age": "30"
      };
      let options = {
         method: 'POST', // 发出 POST 请求
         headers: {
            'Content-Type': 'application/json;charset=utf-8'
         },
         body: JSON.stringify(employee)
      };
      let URL = "https://dummy.restapiexample.com/api/v1/create";
      fetch(URL, options)
         .then(res => res.json()) // 获取响应
         .then(res => {
            output.innerHTML += "请求的状态是 : " + res.status + "<br>";
            output.innerHTML += "API 返回的消息是 : " + res.message + "<br>";
            output.innerHTML += "添加的数据是 : " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "API 返回的错误是 : " + JSON.stringify(err);
         });
   </script>
</body>
</html>

输出：

请求的状态是 : success
API 返回的消息是 : Successfully! Record has been added.
添加的数据是 : {"emp_name":"Sachin","emp_age":"30","id":7425}

使用 Fetch() API 发起 PUT 请求示例

在下面的代码中，我们创建了一个名为 'animal' 的对象。

另外，我们也创建了一个 options 对象。在 options 对象中，我们添加了 'PUT' 方法、headers 以及 animal 对象作为 body 部分。

之后，我们使用 fetch() API 更新给定 URL 处的数据。你可以看到输出响应成功更新了数据。

<html>
<body>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      let animal = {
         "name": "Lion",
         "color": "Yellow",
         "age": 10
      };
      let options = {
         method: 'PUT', // 更新记录
         headers: {
            'Content-Type': 'application/json;charset=utf-8'
         },
         body: JSON.stringify(animal)
      };
      let URL = "https://dummy.restapiexample.com/api/v1/update/3";
      fetch(URL, options)
         .then(res => res.json()) // 获取响应
         .then(res => {
            console.log(res);
            output.innerHTML += "请求的状态是 : " + res.status + "<br>";
            output.innerHTML += "API 返回的消息是 : " + res.message + "<br>";
            output.innerHTML += "更新的数据是 : " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "API 返回的错误是 : " + JSON.stringify(err);
         });
   </script>
</body>
</html>

输出：

请求的状态是 : success
API 返回的消息是 : Successfully! Record has been updated.
更新的数据是 : {"name":"Lion","color":"Yellow","age":10}

使用 Fetch() API 发起 DELETE 请求示例

在下面的代码中，我们使用 fetch() API 向给定的 URL 发起 'DELETE' 请求以删除特定数据。它返回带有成功消息的响应。

<html>
<body>
   <div id="output"></div>
   <script>
      const output = document.getElementById("output");
      let options = {
         method: 'DELETE', // 删除记录
      };
      let URL = "https://dummy.restapiexample.com/api/v1/delete/2";
      fetch(URL, options)
         .then(res => res.json()) // 删除数据后获取响应
         .then(res => {
            output.innerHTML += "请求的状态是 : " + res.status + "<br>";
            output.innerHTML += "API 返回的消息是 : " + res.message + "<br>";
            output.innerHTML += "删除的数据 ID 是 - " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "API 返回的错误是 : " + JSON.stringify(err);
         });
   </script>
</body>
</html>

输出：

请求的状态是 : success
API 返回的消息是 : Successfully! Record has been deleted
删除的数据 ID 是 - "2"

使用 Fetch() API 的优势

以下是使用 fetch() API 与第三方软件或 Web 服务器进行交互的一些好处：

简单语法：它提供了一种简单的语法来向服务器发出 API 请求。
基于 Promise：它返回一个 Promise，你可以使用 'then...catch' 块或 'async/await' 关键字异步解决。
JSON 处理：它内置了将字符串响应数据转换为 JSON 数据的功能。
选项：你可以通过 fetch() API 向请求传递多个选项。