php中文网

JavaScript Promises && Fetch

php中文网

承诺

餐厅

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

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

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

javascript

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

立即学习“Java免费学习笔记(深入)”;

创造一个承诺:

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 Promises && Fetch的详细内容,更多请关注php中文网其它相关文章!