new Promise() 的时候,传一个 executor 给 Promise.

let promise = new Promise(function(resolve, reject) {
// this function will executes immediately
})

这个函数会立刻被执行,在 executor 里面调用了 resolve 之后, Promise 变为 fulfilled,在 executor 里面调用了 reject 之后,Promise 变为 rejected。如果 resolve 和 reject 都还没被调用,Promise 的状态是 pending(等待结果)。.then/.catch/.finally都是异步的,JavaScript 是单线程模型,所有的异步任务都将被放到任务队列里,等主线程的所有的代码执行完然后才执行任务队列里的任务。JavaScript 是单线程,也就是所有的异步代码都会等到 JS 文件里面的代码都执行完了才执行。

setTimeout() 是异步的,不会阻塞函数执行,所以 let promise 立刻得到了 Promise 对象。Promise 的 state 和 result 都是内部的,不能直接访问。要拿到 result, 就要使用 .then 或者 .catch 方法,传一个接受结果的函数给他们。Promise.resolve() 就相当于 new Promise(resolve => resolve())Promise.reject() 相当于是 new Promise((resolve, reject) => reject())

.then.catch 都是返回一个 Promise 对象,而 Promise 对象有 then 和 catch 方法,所以可以链起来。这个 undefined 是 console.log(r) 的输出。

在 then 里面也可以 return new Promise(...)1。对于错误处理,executor 外部有一个隐式的 try...catch,也就是说 executor 执行流的异常会被后来最近的 .catch() 调用捕获到,没有捕获的的错误最后会被抛到 window,或者全局。值得注意的是 .catch() 处理异常以后也会返回一个 Promise 对象。

async 意味着函数一定返回一个 Promise,如果函数正常 return,return 的结果在一个 resolved Promise 里面。.then() 里面可以返回一个 Promise,在 async 函数里面也可以显式的返回一个 Promise。

await 不是单纯的等待,不是阻塞的等待,literally suspends the function execution,实际上是挂起这个函数的执行,或者说暂停这个函数的执行,等 Promise settle 也是就是等 Promise 有结果之后,然后 resume(恢复)执行。这就有点像是生成器的 yield,从上次打断的地方恢复执行。await 挂起/暂停的时候会CPU执行其他的异步任务,await 有等待的意思,不过实际上还有让步,会将执行权让给其他的任务,等其他的任务执行完或者其他的任务让步以后,然后继续之前 await 的地方执行。具体会运行到哪个异步任务,得看当时任务队列里面有什么任务在等待执行。

Let’s emphasize: await literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn’t cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.

await 会去调用.then(),获取 Promise 的结果。async/await 使得调用异步函数,不需要写回调了,也不需要一直 .then,异步代码就像普通的代码一样。

初学 JavaScript 的 async/await,以为 await 就是阻塞的等待,后来了解到协程,发现 async/await 是一个比较通用的关于协程的关键字。这其实就是 JavaScript 的协程,可以实现单线程的并发。

JavaScript Promises, async/await的更多相关文章

  1. 【转】6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

    原文:https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec105 ...

  2. [转] 理解 JavaScript 的 async/await

    [From] https://segmentfault.com/a/1190000007535316      边城 2016年11月19日发布 随着 Node 7 的发布,越来越多的人开始研究据说是 ...

  3. 【前端_js】理解 JavaScript 的 async/await

    async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解.async 是“异步”的简写,而 await 可以认为是 async wait 的简写.所以应该很好理解 async ...

  4. 理解 JavaScript 的 async/await

    随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 c# 5.0 的语法中.C# ...

  5. [转] Understanding JavaScript’s async await

    PS:Promise的用处是异步调用,这个对象使用的时候,call then函数,传一个处理函数进去,处理异步调用后的结果 Promise<Action>这样的对象呢,异步调用后的结果是一 ...

  6. 异步模式:Callbacks, Promises & Async/Await

    [译]异步JavaScript的演变史:从回调到Promises再到Async/Await https://www.i-programmer.info/programming/theory/8864- ...

  7. JavaScript 的 Async\/Await 完胜 Promise 的六

    参考:http://www.10tiao.com/html/558/201705/2650964601/1.html Node 现在从版本 7.6 开始就支持 async/await 了. 简介: A ...

  8. 深入理解理解 JavaScript 的 async/await

    原文地址:https://segmentfault.com/a/1190000007535316,首先感谢原文作者对该知识的总结与分享.本文是在自己理解的基础上略作修改所写,主要为了加深对该知识点的理 ...

  9. JavaScript 的 async/await

    随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await. 异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认 ...

  10. JavaScript 利用 async await 实现 sleep 效果

    const sleep = (timeountMS) => new Promise((resolve) => { setTimeout(resolve, timeountMS); }); ...

随机推荐

  1. 了解如何配置Nginx日志

    设置access_log 访问日志主要记录客户端的请求.客户端向Nginx服务器发起的每一次请求都记录在这里.客户端IP,浏览器信息,referer,请求处理时间,请求URL等都可以在访问日志中得到. ...

  2. Grafana配置Alert监控告警

    1.添加告警途径 这里以slack为例 测试是否可用 在slack上收到告警通知了 安装插件 # grafana-cli plugins install grafana-image-renderer ...

  3. MySQL数据库-数据表(下)

    分析:给 reader 表添加数据. INSERT INTO:插入数据,插入数据的时候会检查主键或者唯一索引,如果出现重复就会报错: 语法:INSERT INTO table_name VALUES ...

  4. Linux命令系列之ls——原来最简单的ls这么复杂

    Linux命令系列之ls--原来最简单的ls这么复杂 ls命令应该是我们最常用的命令之一了,但是我们可能容易忽略那些看起来最简单的东西. 简介 ls命令的使用格式如下 ls [选项] [具体的文件] ...

  5. Future详解

    Future模式 [1]Future模式是多线程开发中常见的设计模式,它的核心思想是异步调用.对于Future模式来说,它无法立即返回你需要的数据,但是它会返回一个契约,将来你可以凭借这个契约去获取你 ...

  6. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  7. Java一次返回中国所有省市区三级树形级联+前端vue展示【200ms内】

    一.前言 中国省市区还是不少的,省有34个,市有391个,区有1101个,这是以小编的库里的,可能不是最新的,但是个数也差不了多少. 当一次返回所有的数据,并且还要组装成一个三级树,一般的for,会循 ...

  8. uni-app 如何优雅的使用权限认证并对本地文件上下起手

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1.起因 最近有一个需求,需要使用自定义插件,来对接硬件功能,需要配合对手机的权限进行判断和提示,并在对接后对本地文件进行操作,这里给大家 ...

  9. 一篇文章带你掌握MyBatis简化框架——MyBatisPlus

    一篇文章带你掌握MyBatis简化框架--MyBatisPlus 我们在前面的文章中已经学习了目前开发所需的主流框架 类似于我们所学习的SpringBoot框架用于简化Spring开发,我们的国人大大 ...

  10. springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符

    主要用到的知识就是thyme leaf中的条件运算符 表达式:(condition)?:then:else 当条件condition成立时返回then.否则返回else 具体代码:<td th: ...