vue promise await asyc

一、Promise 是什么

一种处理异步代码（而不会陷入回调地狱）的方式。

二、Promise如何运作

封装了三个状态: 等待中 处理成功 失败

当 promise 被调用后，它会以处理中状态开始。 这意味着调用的函数会继续执行，而 promise 仍处于处理中直到解决为止，从而为调用的函数提供所请求的任何数据。

被创建的 promise 最终会以被解决状态（resolve）或被拒绝状态（reject）结束，并在完成时调用相应的回调函数then 和 catch。

//1.resolve 会触发then，
var p=new Promise((resolve,reject)=>{
     resolve("成功了")//then会接受到“成功了“ 
})
p.then(res=>{
    console.log("结果:",res)//结果：成功了
})


//2.reject 会触发catch
var p=new Promise((resolve,reject)=>{
    //resolve 会触发then，
    //reject 会触发catch
     reject("失败了")//catch会接受到“失败了“ 
})
p.catch(res=>{
    console.log("结果:",res)//结果：失败了
})

三、以前的写法是通过回调函数来获取异步数据 可以让异步操作同步

function drink(fn){
   setTimeout(()=>{
       fn("先喝"),2000
   })
}
function eat(fn){
    fn("再吃")
}
 drink((res)=>{
     console.log(res)
 })
eat((res)=>{
     console.log(res)
 })
//结果是：再吃 先喝  

//我们希望的结果是“先喝 再吃” 下面通过回调函数来获取异步数据 从而控制执行的步骤
function drink(fn){
   setTimeout(()=>{
       fn("先喝"),2000
   })
}
function eat(fn){
    fn("再吃")
}
 drink((res)=>{
     console.log(res)
     eat((res)=>{
     console.log(res)
 })
 })//结果：先喝 再吃

但是如果有有多层嵌套形成回调地狱，难以维护

        var do1 = doSomeThing => doSomeThing(1);
        var do2 = doSomeThing => doSomeThing(2);
        var do3 = doSomeThing => doSomeThing(3);
        var do4 = doSomeThing => doSomeThing(4);
        var do5 = doSomeThing => doSomeThing(5);

        var num = 0;
        do1((a) => {
            num = num + a;
            //回调函数,依赖do1的回调函数结果
            do2((a) => {
                num = num + a;
                //回调函数,依赖do2的回调函数结果
                do3((a) => {
                    num = num + a;
                    //回调函数,依赖do3的回调函数结果
                    do4((a) => {
                        num = num + a;
                        //回调函数,依赖do4的回调函数结果
                        do5((a) => {
                            num = num + a;
                        })
                    })
                })
            })
        })
        console.log("最终结果", num)//最终结果是：15

四、ES6出了Promise之后，可以解决这个问题。

4.1 方法一：用Promise then

function drink(){
    return new Promise((resolve)=>{
        resolve('先喝')
    })
}
function eat(){
    return new Promise((resolve)=>{
        resolve('再吃')
    })
}
drink().then(res=>{
    console.log(res)
    return eat()
}).then((res)=>{
    console.log(res)
})//结果：先喝  再吃

4.2 方法二：promise配合await asyc使用

var p1 = ()=>{

  return  new Promise ((resolve)=>{
    setTimeout(()=>{
         resolve("先喝")
    },3000)
   
})
}
var p2 = ()=>{
   return new Promise ((resolve,reject)=>{
        setTimeout(()=>{
         resolve("再吃")
    },1000)
   })
}
var func= async ()=>{

    //直接获取resolve传递异步数据
    var a1=await p1();
    console.log(a1)
    var a2=await p2();
     console.log(a2)
   
} 
func()//结果：先喝 再吃