es6语法 Promise和async/await 使用

Promise 作用

1. 主要用于异步计算
2. 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3. 可以在对象之间传递和操作promise，帮助我们处理队列

三种状态

reslove 成功
reject 失败
pending初始状态

使用

  let fun1 = new Promise((reslove,reject)=>{
        setTimeout(()=>{       
            reslove()//成功状态
            console.log('fun1')
           
        },1000)
  }).then(res=>{ //链式调用  
    return  new Promise((reslove,reject)=>{
           setTimeout(()=>{       
            console.log('fun2')
            reslove()
           
           },3000)
      })
  }).then(res=>{ //异步方法同步执行
       return new Promise((reslove,reject)=>{
        setTimeout(()=>{
           console.log('fun3')
           reject() //失败状态
         },1000)
       })
  }).catch(res=>{
       console.log('error')
  })

依次输出

总结

普通函数 执行的顺序应该是 fun1 fun3 fun2 而Promise 将其队列化 按照预期设定去执行

配合 async 和await

async 异步 await 等待

  // 写在普通函数前面 表示这是一个处理异步的函数
   async function init(){
    
       await run1() //等待当前函数执行完
       await run2()
       await run3()
       await run4()
       await run5()
   }
   init() //调用异步函数
 
   function run1(){
       return new Promise((res,rej)=>{
            setTimeout(()=>{
                console.log('1')
                 res()
            },1000)
       })
   }
   function run2(){
       return new Promise((res,rej)=>{
            setTimeout(()=>{
                console.log('2')
                 res()
            },1000)
       })
   }
   function run3(){
       return new Promise((res,rej)=>{
            setTimeout(()=>{
                console.log('3')
                 res()
            },1000)
       })
   }
   function run4(){
       return new Promise((res,rej)=>{
            setTimeout(()=>{
                console.log('4')
                 res()
            },1000)
       })
   }
   function run5(){
       return new Promise((res,rej)=>{
            setTimeout(()=>{
                console.log('5')
                 res()
            },1000)
       })
   }

输出结果：

更换执行顺序

   async function init(){
        await run5()
        await run4()
        await run3()
        await run2()
        await run1() //等待当前函数执行完
   }
   init() //调用异步函数

执行结构：

结论：Promise 配合 async/await使用：
1.主要解决普通异步函数的回调地狱问题
2.队列化执行使代码结构更加简洁清晰,便于维护，增加代码的可读性