异步-promise、async、await

zhaoxinran997 2020-01-11 原文

下面代码打印结果是？

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)
})