首页 > web前端 > js教程 > JavaScript 承诺 && 获取

JavaScript 承诺 && 获取

Mary-Kate Olsen
发布: 2024-10-09 18:26:02
原创
706 人浏览过

JavaScript Promises && Fetch

承诺

餐厅

JavaScript 中的 Promise 只是一个待处理的任务。这就像在餐厅点餐一样:当您下订单时,服务员会承诺为您送上您点的食物。食物端上桌后,承诺就兑现了。如果您订购的食物因厨房缺少关键原料而无法提供,那么您可以在其他地方吃饭。

这都是异步的。当您坐在桌旁时,您可能正在与朋友聊天或滚动手机。您暂停正在做的事情,以便可以向服务员下订单,然后返回到之前正在做的事情。

JavaScript Promise 的工作方式类似。由于 JavaScript 是单线程的,Promise 允许 JavaScript 引擎在等待某些操作完成时继续执行其他任务。

JavaScript

Promise 是一种特定类型的对象。所有的承诺都以待处理状态开始。 Promise 中的回调函数称为 executor,定义何时解析或拒绝 Promise。

创造一个承诺:

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})
登录后复制

使用承诺

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));
登录后复制

拿来

fetch 是 JavaScript 中的一个内置函数,返回一个承诺。它发出 HTTP 请求并允许您使用 .then() 和 .catch() 异步处理响应。

使用 fetch()

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');
登录后复制

调用堆栈和事件循环

调用堆栈管理同步任务,跟踪它们的执行顺序。这相当简单:任务按照编写的顺序执行。

但是,异步任务由事件循环处理。事件循环允许异步代码乱序执行,让 JavaScript 引擎无需等待即可继续处理其他任务。

例子

这将如何执行?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");
登录后复制

您可能期望它会按顺序执行,但事实并非如此。 JavaScript 事件循环以不同的方式处理这些指令。
结果其实是这样的:

> console log first!
> console log last!!!
> promise third
> set timeout second!
登录后复制

为什么?

事件循环重新安排执行优先级:

  1. 同步任务(如 console.log("console log first!") 和 console.log("console log last!!!"))会按照它们出现的顺序立即执行。
  2. 微任务(例如 Promise 回调)被赋予下一个优先级,并在任何其他异步任务之前执行。
  3. 宏任务(如 setTimeout)最后处理,即使超时设置为零。

这允许 JavaScript 引擎异步工作,执行其他任务,而无需等待所有操作立即完成。


Unsplash 上安德鲁·彼得罗夫 (Andrew Petrov) 的封面照片

以上是JavaScript 承诺 && 获取的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板