我现已开发网站十多年了,还记得咱们不得不依赖 XMLHttpRequest 来宣布网络恳求的时候。我认为我其时对如何宣布网络恳求有很好的了解,但后来 Fetch API 的出现改变了一切。
Fetch API 是一种网络规范,答应您宣布网络恳求。与 XMLHttpRequest 比较,它旨在为宣布网络恳求提供更清晰、更易于运用的语法。Fetch API 是一个低级 API,这意味着它的功用集有限,但它也非常灵敏,能够处理范围广泛的网络恳求。
运用 Fetch API 宣布 GET 恳求
以下是运用 Fetch API 宣布的GET 恳求的示例:
fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
运用 Fetch API 的 POST 恳求与 GET 恳求一样简略。唯一的区别是咱们有必要包含一些数据才能发送到服务器。
就这样!您现在了解了如何运用 Fetch API 来发出网络恳求。
由于 Fetch API 是一个低级 API,它并没有为咱们处理一些常见的问题。如果恳求失败(例如,服务器回来 500 Internal Server Error),则执行 catch 块。如果服务器回来 200 OK 呼应但呼应主体是过错消息,则不会执行 catch 块。要处理这些状况,请检查 then() 块中的呼应状况,如果不在 200 和 299 之间则抛出过错。这是最新版别的代码:
fetch('https://jsonplaceholder.typicode.com/users') .then(response => { if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } return response.json(); }) .then(data => { console.log(data); // Do something with the data}).catch(error => console.error(error));
在 JavaScript 中发出网络请求对任何 Web 开发人员来说都是至关重要的,而 Fetch API 使它变得简略。Fetch API 可以帮助您构建从简略的博客到复杂的 Web 应用程序的任何内容。所以,不要害怕立即开始使用它!