在 JavaScript 中使用 Fetch API 网络请求

首页>>网站学院>>JavaScript

999+

image.png

我现已开发网站十多年了,还记得咱们不得不依赖 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));


发布留言:


留言信息(最新3条):

昵称:A****nda 时间:2023-04-13 10:23:34

留言:麻烦帮我改下模板代码咧 什么时候比较方便

昵称:WSS素材网 时间:2023-04-13 10:23:34

回复:请添加微信:Wisdom-boylin 或 添加QQ:584244711

昵称:炸****趴菜。 时间:2023-04-12 15:14:27

留言:兄弟 我需要个蜘蛛池啊 有没介绍看到加我

昵称:WSS素材网 时间:2023-04-12 15:14:27

回复:请添加微信:Wisdom-boylin 或 添加QQ:584244711

昵称:彩****的雨云 时间:2023-04-12 14:47:10

留言:我想咨询下你们做不做小旋风超级模板的 需要10套

昵称:WSS素材网 时间:2023-04-12 14:47:10

回复:请添加微信:Wisdom-boylin 或 添加QQ:584244711


版权声明:本文为「WSS素材网」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。  
原文链接:https://wsstp.com/JavaScript/63.html