专栏名称: Fundebug
Fundebug为JavaScript、微信小程序及Node.js开发团队提供专业的线上代码bug监控和智能分析服务。
目录
相关文章推荐
吉林市场监管  ·  3·15优化消费环境 市场监管在行动 ⑦|辉南县 ·  4 小时前  
吉林市场监管  ·  3·15优化消费环境 市场监管在行动 ⑦|辉南县 ·  4 小时前  
前端早读课  ·  【早阅】Vibe Coding 宣言 ·  昨天  
前端早读课  ·  【早阅】Axios 请求可能存在 ... ·  昨天  
前端早读课  ·  【第3474期】猫耳大型活动提效:组件低代码化 ·  2 天前  
51好读  ›  专栏  ›  Fundebug

理解Promise的3种姿势

Fundebug  · 公众号  · 前端  · 2017-09-26 08:34

正文

译者按: 对于 Promise ,也许你会用了,却并不理解;也许你理解了,却只可意会不可言传。这篇博客将从3个简单的视角理解 Promise ,应该对你有所帮助。

  • 原文: Three ways of understanding Promises

  • 译者: Fundebug

为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。

示例1 中, asyncFunc() 函数返回的是一个 Promise 实例:


// 示例1

function asyncFunc()

{

return new Promise(function(resolve, reject)

   {

setTimeout(function()

       {

resolve('Hello, Fundebug!');

}, 100);

});

}

asyncFunc()

.then(function(x)

   {

console.log(x); // 1秒之后打印"Hello, Fundebug!"

});


1秒之后, Promise 实例的状态变为 resolved ,就会触发 then 绑定的回调函数,打印 resolve值 ,即”Hello, Fundebug!”。

那么,什么是 Promise 呢?

  • Promise 调用是阻塞的

  • Promise 中保存了异步操作结果

  • Promise 是一个事件

Promise 调用是阻塞的

示例2 可以帮助我们理解 阻塞


// 示例2

function asyncFunc()

{

return new Promise(function(resolve, reject)

   {

setTimeout(function()

       {

resolve('Hello, Fundebug!');

}, 1000);

});

}

async function main()

{

const x = await asyncFunc(); // (A)

console.log(x); // (B) 1秒之后打印"Hello, Fundebug!"

}

main();


以上代码是采用Async/Await语法写的,与 示例1 完全等价。 await 的中文翻译即为”等待”,这里可以”望文生义”。因此,相比于使用 Promise 实现,它更加直观地展示了什么是 阻塞

  • (A)行: 等待 asyncFunc() 执行,直到它返回结果,并赋值给变量 x

  • (B)行: 打印 x

事实上,使用 Promise 实现时,也需要等待 asyncFunc() 执行,之后再调用 then 绑定的回调函数。因此,调用 Promise 时,代码也是阻塞的。







请到「今天看啥」查看全文