Javascript 简明教程

JavaScript - Fetch API

What is a Fetch API?

JavaScript Fetch API 是一个 Web API,它允许 Web 浏览器向 Web 服务器发出 HTTP 请求。在 JavaScript 中,ES6 版本中引入了抓取 API。它是 XMLHttpRequest (XHR) 对象的替代方案,用于向服务器发出“GET”、“POST”、“PUT”或“DELETE”请求。

浏览器的窗口对象默认包含 Fetch API

抓取 API 提供 fetch() 方法,该方法可用于跨网络异步访问资源。

fetch() 方法允许您向服务器发出请求,并且它会返回一个承诺。之后,您需要解决承诺才能获得从服务器收到的响应。

Syntax

您可遵循以下语法在 JavaScript 中使用 fetch() API -

window.fetch(URL, [options]);
OR
fetch(URL, [options]);

Parameters

fetch() 方法接收两个参数。

  1. URL - 这是您需要发出请求的 API 端点。

  2. [options] - 这是一个可选项。它是一个对象,包含方法、头等信息,用作一个键。

Return value

它返回您可使用“then…​catch”代码块或异步执行解决的承诺。

Handling Fetch() API Response with 'then…​catch' Block

JavaScript fetch() API 返回承诺,并且您可使用“then…​catch”代码块处理它。

按照以下语法使用 fetch() API 和“then…​catch”代码块。

fetch(URL)
.then(data => {
   // Handle data
})
.catch(err=> {
   // Handle error
})

在上述语法中,您可处理“then”代码块中的“data”以及“catch”代码块中的错误。

Example

在下面的代码中,我们使用 fetch() API 从给定 URL 中提取数据。它返回我们使用“then”代码块处理的承诺。

首先,我们将数据转换为 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 += "The data from the API is: " + "<br>";
	  	 output.innerHTML += JSON.stringify(data);
   	  });
   </script>
</body>
</html>
The data from the API is:
{"userId":1,"id":5,"title":"laboriosam mollitia et enim quasi adipisci quia provident illum","completed":false}

Handling Fetch() API Response Asynchronously

您还可以使用 async/await 关键字异步解决 fetch() API 返回的承诺。

Syntax

用户可遵循以下语法将 async/await 关键字与 fetch() API 一起使用。

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

在上述语法中,我们使用“await”关键字来停止代码执行,直到承诺得到满足。然后,我们再次使用“await”关键字和 data.json() 停止函数执行,直到它将数据转换为 JSON 格式。

Example

在下面的代码中,我们定义了 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 += "The data from the API is: " + "<br>";
      output.innerHTML += JSON.stringify(data);
   }
   getData();
</script>
</body>
</html>
The data from the API is:
{"userId":1,"id":6,"title":"qui ullam ratione quibusdam voluptatem quia omnis","completed":false}

Options with Fetch() API

您还可以将对象作为第二个参数传递,其中包含作为键值对的选项。

Syntax

按照以下语法将选项传递给 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",
})

Options

此处,我们已提供了一些选项可传递给 fetch() API。

  1. method − 它采用“GET”、“POST”、“PUT”和“DELETE”方法作为值,具体取决于您想要进行哪种类型的请求。

  2. body − 用于将数据传递到字符串格式中。

  3. mode −出于安全原因,它采用“cors”、“no-cors”、“same-origin”等值。

  4. cache − 它采用“*default”、“no-cache”、“reload”等值。

  5. credentials − 它采用“same-origin”、“omit”等值。

  6. headers − 您可以使用此属性将标头传递给请求。

  7. redirect − 如果您希望用户在满足请求后重定向到其他网页,可以使用重定向属性。

Example: Making a GET Request

在下面的代码中,我们已将“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 += "The status of the response is - " + res.status + "<br>";
            output.innerHTML += "The message returned from the API is - " + res.message + "<br>";
            output.innerHTML += "The data returned from the API is - " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "The error returned from the API is - " + JSON.stringify(err);
         })
   </script>
</body>
</html>
The status of the response is - success
The message returned from the API is - Successfully! Record has been fetched.
The data returned from the API is - {"id":2,"employee_name":"Garrett Winters","employee_salary":170750,"employee_age":63,"profile_image":""}

Example (Making a POST Request)

在下面的代码中,我们创建了包含 emp_name 和 emp_age 属性的 employee 对象。

此外,我们还创建了包含方法、标头和正文属性的 options 对象。我们将“POST”用作方法的值,并将 employee 对象用作正文值(在将其转换为字符串后)。

我们使用 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', // To make a post request
         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()) // Getting response
         .then(res => {
            output.innerHTML += "The status of the request is : " + res.status + "<br>";
            output.innerHTML += "The message returned from the API is : " + res.message + "<br>";
            output.innerHTML += "The data added is : " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "The error returned from the API is : " + JSON.stringify(err);
         })
   </script>
</body>
</html>
The status of the request is : success
The message returned from the API is : Successfully! Record has been added.
The data added is : {"emp_name":"Sachin","emp_age":"30","id":7425}

Example (Making a PUT Request)

在下面的代码中,我们创建了“animal”对象。

此外,我们还创建了 options 对象。在 options 对象中,我们添加了“PUT”方法、标头和 animal 对象作为正文。

然后,我们使用 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', // To Update the record
         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()) // Getting response
         .then(res => {
            console.log(res);
            output.innerHTML += "The status of the request is : " + res.status + "<br>";
            output.innerHTML += "The message returned from the API is : " + res.message + "<br>";
            output.innerHTML += "The data added is : " + JSON.stringify(res.data);
         })
         .catch(err => {
            output.innerHTML += "The error returned from the API is : " + JSON.stringify(err);
         })
   </script>
</body>
</html>
The status of the request is : success
The message returned from the API is : Successfully! Record has been updated.
The data added is : {"name":"Lion","color":"Yellow","age":10}

Example (Making a DELETE Request)

在下面的代码中,我们对给定的 URL 发出“DELETE”请求,以使用 fetch() API 删除特定数据。它返回包含成功消息的响应。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById("output");
      let options = {
         method: 'DELETE', // To Delete the record

      }
      let URL = " https://dummy.restapiexample.com/api/v1/delete/2";
      fetch(URL, options)
		 .then(res => res.json()) // After deleting data, getting response
		 .then(res => {
			output.innerHTML += "The status of the request is : " + res.status + "<br>";
			output.innerHTML += "The message returned from the API is : " + res.message + "<br>";
			output.innerHTML += "The data added is - " + JSON.stringify(res.data);
         })
		 .catch(err => {
		    output.innerHTML += "The error returned from the API is : " + JSON.stringify(err);
		 })
   </script>
</body>
</html>
The status of the request is : success
The message returned from the API is : Successfully! Record has been deleted
The data added is - "2"

Advantages of Using the Fetch() API

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

  1. Easy Syntax − 它提供了一个直接的语法来向服务器提出 API 请求。

  2. Promise-based − 它返回一个 Promise,你可以使用“then…​catch”块或“async/await”关键字异步地解决它。

  3. JSON handling − 它具有内置功能将字符串响应数据转换成 JSON 数据。

  4. Options − 对于请求,你可以使用 fetch() API 传递多个选项。