从零开始Vue3数据交互之promise用法详解

//普通函数
        function fun1(){
            console.log("fun1 invoked")
        }
        console.log("code1 invoked")
        //函数的调用

        fun1()  //执行完函数才会执行下面代码
        console.log("code2 invoked")

function fun1(){
            setTimeout(function (){
                console.log("fun1 invoked") 
            }, 2000);
        }
       
        console.log("code1 invoked")
        fun1()
        console.log("code2 invoked")

（1）Promise对象代表一个异步操作，<strong>有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。</strong>只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
​
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`<strong>Pending</strong>`变为`<strong>Resolved</strong>`和从`<strong>Pending</strong>`变为`<strong>Rejected</strong>`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

 // 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
        })
 console.log("other code1")

promise.then(
            //等待promise对象状态发生改变实才会执行的代码
            // function(){
            //     //promsie对象状态转换为resolved状态时才会执行的函数
            //     console.log("promise success")
            // }
            function(value){
                //promsie对象状态转换为resolved状态时才会执行的函数
                console.log("promise success:" + value)
            },
            // function(){
            //     //promsie对象状态转换为reject状态时才会执行的函数
            //     console.log("promise fail")
            // }
            function(value){
                //promsie对象状态转换为reject状态时才会执行的函数
                console.log("promise fail:"+ value)
            }
        )
        console.log("other code2")

// 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
             resolve()
        })
 console.log("other code1")

// 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
              reject()
        })
 console.log("other code1")

// 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
             resolve("good")
        })
 console.log("other code1")

// 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
             reject("no")
        })
 console.log("other code1")

// 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
              // 人为构建一个异常
            throw new Error("error message")
        })
 console.log("other code1")

 // 创建一个promise对象
        let promise = new Promise(
            function (resolve,reject){
             // 这里代码
             console.log("function invoked")
              // 1. 普通调用函数
                //调用resolve函数
                //  resolve()
                //调用reject函数
                //  reject()
            // 2. 传参调用函数
            resolve("good")
            // reject("no")

            // //人为构建一个异常
            //throw new Error("error message")
        })
 console.log("other code1")

console.log("other code1")
        // 继续调用
        promise.then(
            //等待promise对象状态发生改变实才会执行的代码
            // function(){
            //     //promsie对象状态转换为resolved状态时才会执行的函数
            //     console.log("promise success")
            // }
            function(value){
                //promsie对象状态转换为resolved状态时才会执行的函数
                console.log("promise success:" + value)
            },
        ).catch(
            // 用catch处理时可以把then中第二个function省略
            function(value){
                //当promise状态是reject或者 promsie出现异常时 会执行的函数
                console.log("promise catch:"+ value)
            }
        )
        console.log("other code2")

  async 帮助我们使用简洁的语法获得一个promise对象
                let promise = new Promise((){})
                async function aaa(){}
                1. async 用于标识函数的,async函数返回的结果就是一个promise对象
                2. 方法如果正常return结果promise状态就还是resolved return后的结果就是成功状态的返回值
                3. 方法中出现了异常,则返回的promise就是一个失败状态
                4.  async函数返回的结果如果是一个promise,则状态由内部的promise来决定

       //通过async直接声明一个回调函数
       async function aaa(){

      }

       //通过箭头函数声明回调函数
        let aaa = async() =>{
            
       }

async function fun1(){
        // return 888
        // throw new Error("something wrong")
        //快速创建一个resolve对象并返回
        // let promise = Promise.resolve("nice")
        //快速创建一个reject对象并返回
        let promise = Promise.reject("no")
        return promise
    }
    //调用fun1函数返回promise对象
    let promise= fun1()
    //调用promise对象的then和catch方法
    promise.then(
        function(value){
            //promsie对象状态转换为resolved状态时才会执行的函数
            console.log("success:" + value)
        }
    ).catch(
        function(value){
             //当promise状态是reject或者 promsie出现异常时 会执行的函数
            console.log("fail:" + value)
        }
    )

await 帮助我们成功获得promise成功状态的返回值的关键字
                1. await 右边如果是一个普通值,则直接返回该值,如果右边是promise,返回promise成功状态的结果 let res = await "张三" res 就是张三,那么用await干嘛
                   let res await "张三"
                   let res = await Promise.resolve("张三")
                       此时res = "张三"
                2. await 右边如果是一个失败状态的promise 那么await会直接抛出异常
                3. await 关键字必须在async修饰的函数中使用,async函数中可以没有await关键字
                4. await 在存在await方法的内部后边的代码会等待await执行完毕后继续执行

   async function fun1(){
        return 888
    }
    async function fun2(){
        try{
                let res = await fun1()
                // let res = await Promise.reject("something wrong")
                console.log("await got:" + res)
        }catch(e){
            console.log("catch got:" + e)
        }
       
    }
    fun2()

async function fun1(){
        return 888
    }
    async function fun2(){
        try{
                // let res = await fun1()
                let res = await Promise.reject("something wrong")
                console.log("await got:" + res)
        }catch(e){
            console.log("catch got:" + e)
        }
       
    }
    fun2()