异步-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。

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

了解了这些知识，咱们回到第一题

一、首先：promise 的建立是同步的，then、catch是异步，因此先执行同步打印出2 4 7
   二、异步的 一、三、五、6，进入事件队列。
   三、setTimeout 为宏任务，promise为微任务，先执行微任务，因此三、5先被打印出来，一、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变量，还避免了嵌套代码。