JavaScript Promises && Fetch-js教程-PHP中文网

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!

为什么？

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

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

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

unsplash 上安德鲁·彼得罗夫 (andrew petrov) 的封面照片