从0开始Vue3数据交互之promise详解

前言

1. 预先须知-普通函数和回调函数

1.1 普通函数:

1.2 回调函数:

2. Promise 简介

2.1 简介

2.2 特点

3. Promise 基本用法

3.1 Promise then

1. 没有传参

3.1.1 没有调用resolve 函数和reject 函数时

3.1.2 调用resolve()函数

3.1.3 调用 reject()函数

2. 传参调用函数

3.1.4 调用resolve("good")函数,并传入参数good

3.1.5 调用reject("no")函数,并传入参数no

3.出现异常情况

3.1.6 人为构造异常

3.2 Promise catch()

3.3 async和await的使用

1. async

2. await

前言

本篇是在学习Axios时结合自己的笔记与记录,在学习Axios之前首先需要学习promise语法以及需要了解的知识,只有学习了这些,使用axios才会用起来很顺手,并且能够更加深入的理解和使用

1. 预先须知-普通函数和回调函数

1.1 普通函数:

正常调用的函数,一般函数执行完毕后才会继续执行下一行代码

代码示例:

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

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

如图所示, 在执行完普通函数里面的代码后,才会继续执行后面的代码

1.2 回调函数:

一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了

代码示例:

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

如图所示并执行代码时没有等函数执行完后,再执行,而是执行完后,fun1()才执行的

2. Promise 简介

2.1 简介

前端中的异步编程技术，类似Java中的多线程+线程结果回调！

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

2.2 特点

Promise对象有以下两个特点,记住下面的几种状态就可以了。

（1）Promise对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

3. Promise 基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

3.1 Promise then

resolve 函数: 在promise的回调函数中如果调用resolve方法,promise会由pending转换为resolved状态
reject 函数: 在promise的回调函数中如果调用reject方法,promise会由pending转换为reject状态

在下面的图示中都可以看出,回调函数的特点,不会等待函数执行完才继续执行后面的代码

1. 没有传参

3.1.1 没有调用resolve 函数和reject 函数时

代码示例

 // 创建一个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")

此时还有没有改变状态,可以看到此时还是按照代码的顺序来执行的,此时是没有执行then中的代码的

3.1.2 调用resolve()函数

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

如果没有传参的话可以先把then函数中的function中的value去掉

3.1.3 调用 reject()函数

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

2. 传参调用函数

3.1.4 调用resolve("good")函数,并传入参数good

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

3.1.5 调用reject("no")函数,并传入参数no

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

3.出现异常情况

3.1.6 人为构造异常

这里通过构建异常情况,并传递错误信息参数

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

3.2 Promise catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

代码示例:

这里操作其实和上面的是一致的,需要什么状态时就改为对应的函数调用

 // 创建一个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")

3.3 async和await的使用

async和await是ES6中用于处理异步操作的新特性。通常，异步操作会涉及到Promise对象，而async/await则是在Promise基础上提供了更加直观和易于使用的语法。

1. async

帮助我们使用简洁的语法获得一个promise对象

async 用于标识函数的(声明为一个回调函数)下面是它的一些特点:

  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() =>{
            
       }

代码示例:

基本上还是跟之前写的查不多,promise在不同状态时就会调用对应的方法

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

2. await

帮助我们成功获得promise成功状态的返回值的关键字

await的一些特点:

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执行完毕后继续执行

代码示例:

还是跟据不用的的状态来执行不同的函数,这里不同的是await可以当做返回成功状态的关键词,因此不需要创建promise对象来调用了,而是直接使用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()

如图所示: