下面代码打印结果是?
setTimeout(()=>{
console.log(1)
})
new Promise((resolve,reject)=>{
console.log(2)
resolve()
})
.then(()=>{
console.log(3)
})
new Promise((resolve,reject)=>{
console.log(4)
resolve()
})
.then(()=>{
console.log(5)
})
setTimeout(()=>{
console.log(6)
})
console.log(7) /*
2
4
7
3
5
1
6 */

*解析这道题之前我们先了解几个知识点~~~~*

数据加载方案

  • 同步加载
  • 异步加载 : 事件 , 定时器 , ajax

js单线程语言

为什么是单线程语言?

dom操作

  • 如果js是多线程语言,第一个线程执行把dom对象删除,另一个线程执行把dom对象添加
同步代码异步代码加载顺序 : event loop (事件循环)
  • 先执行同步代码,异步任务挂起
        setTimeout(function(){
console.log(1);
},0)
console.log(2);
//执行结果 : 2 , 1 -->先执行console,log(2) setTimeout异步挂起

宏任务和微任务

  • 宏任务一般是:包括整体代码script,setTimeout,setInterval。

  • 微任务:Promise,process.nextTick。

宏任务的异步 和微任务的异步同时都有 优先执行 微任务

了解了这些知识,我们回到第一题
   1、首先:promise 的创建是同步的,then、catch是异步,所以先执行同步打印出2 4 7
2、异步的 1、3、5、6,进入事件队列。
3、setTimeout 为宏任务,promise为微任务,先执行微任务,所以3、5先被打印出来,1、6后被打印出来

promise 承诺 是一个对象

异步代码同步执行

1.三个状态 : pending (进行时) resolve (成功状态), reject(失败的状态).

2.使用时 需要实例化 new Promise()

3.Promise() 参数是一个回调函数

4.在回调函数中有两个参数

​ resolve reject

5.promise返回值为promise

6.promise的方法

  • .then()
两个参数 都是回调函数
如果promise 执行resolve方法 执行为.then里面第一个回调
如果promise 执行reject方法 执行为.then里面第二个回调
  • .catch()
当promise执行了reject方法的时候  执行的是.catch里面的回调
  • .all()
  • .race()

异步

js是单线程,防止被堵塞 node中将所有i/o变成异步

异步的过多嵌套会造成回调地狱

promise的链式调用可以解决回调地狱

async
  • 可以修饰一个函数,被修饰的函数返回promise对象
  • async 返回值可有也可以没有,返回的是返回的数据就是then 接收的数据,不返回数据相当于undefined
async function text(){
return true
}
text()
.then((data)=>{
console.log("ok")
})
.catch((err)=>{
console.log("err")
})
await
  • 在async函数内部使用,将promise变成同步
  • await关键字后面跟Promise对象
//求和操作
function num1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1)
},1000)
})
} function num2(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2)
},500)
})
} async function sum(){
let res1=await num1()
let res2=await num2()
reyturn res1 + res2
}
sum()
.then((data)=>{
console.log(data)
})
  • 使用async函数可以让代码简洁很多,不需要像Promise一样需要些then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码。

异步-promise、async、await的更多相关文章

  1. javascript异步编程 Async/await

    Async/await Async/await 在学习他之前应当补充一定的 promise 知识 它是一种与 promise 相配合的特殊语法,目前被认为是异步编程的终级解决方案 值得我们每一个人学习 ...

  2. 异步编程Async/await关键字

    异步编程Async \await 关键字在各编程语言中的发展(出现)纪实. 时间 语言版本 2012.08.15 C#5.0(VS2012) 2015.09.13 Python 3.5 2016.03 ...

  3. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线? Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...

  4. .net 异步函数 Async await

    .net  异步函数  Async await 一旦为函数添加async关键字 该函数就是一个异步函数. 异步方法必须返回 void 或 Task<> 类型. public static ...

  5. vue使用技巧:Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...

  6. 抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext

    长话短说,本文带大家抓住异步编程async/await语法糖的牛鼻子: SynchronizationContext 引言 C#异步编程语法糖async/await,使开发者很容易就能编写异步代码. ...

  7. 温故知新,CSharp遇见异步编程(Async/Await),聊聊异步编程最佳做法

    什么是异步编程(Async/Await) Async/Await本质上是通过编译器实现的语法糖,它让我们能够轻松的写出简洁.易懂.易维护的异步代码. Async/Await是C# 5引入的关键字,用以 ...

  8. JavaScript异步编程——Async/Await vs Promise

    兼容性 提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await 了.而就在前几天,Node 8已经正式发布了,你可以放心地使用它. 如果你还没有试过它,这里有一堆带有示例的理由 ...

  9. js异步回调Async/Await与Promise区别 新学习使用Async/Await

    Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...

  10. angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )

    Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...

随机推荐

  1. 2016年NOIP普及组复赛题解

    题目涉及算法: 买铅笔:入门题: 回文日期:枚举: 海港:双指针: 魔法阵:数学推理. 买铅笔 题目链接:https://www.luogu.org/problem/P1909 设至少要买 \(num ...

  2. uni-app学习记录02-属性绑定.for循环

    <template> <view class="content"> <text> 我是首页 </text> <!-- 输出纯字 ...

  3. [转]1.2 java web的发展历史

    前言 了解java web的发展历史和相关技术的演进历程,非常有助于加深对java web技术的理解和认识. 阅读目录 1.Servlet的出现 2.Jsp的出现 3.倡导了MVC思想的Servlet ...

  4. [转]VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)

    源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...

  5. webpack学习(一)项目中安装webpack

    如何在项目中安装webpack,webpack-cli? 前提:电脑安装了 node和npm包管理工具 1 创建项目文件夹或者在已有的项目中打开终端  输入相关命令: npm init 因为已经安装好 ...

  6. P1106 细胞分裂

    题目描述 Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家.现在,他正在为一个细胞实验做准备工作:培养细胞样本. Hanks博士手里现在有 \(N\) 种细胞,编号从 \(1\) 到 ...

  7. BoundsChecker下载

    首先,单独的BoundsChecker已经没了,被收购了,整合进了DevPartner 其次,DevPartner是收费软件,属于Borland的.官方地址:http://www.borland.co ...

  8. Callable Objects

    We learned in 7.11 that there are "array-like" objects that are not true arrays but can be ...

  9. RocketMQ(消息重发、重复消费、事务、消息模式)

    分布式开放消息系统(RocketMQ)的原理与实践 RocketMQ基础:https://github.com/apache/rocketmq/tree/rocketmq-all-4.5.1/docs ...

  10. linux 禁止所有中断

    如果你需要禁止所有中断如何? 在 2.6 内核, 可能关闭在当前处理器上所有中断处理, 使用任一个下面 2 个函数(定义在 <asm/system.h>): void local_irq_ ...