异步-promise、async、await - 好文

下面代码打印结果是？
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变量，还避免了嵌套代码。

热门工具换一换