vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3数据交互promise详解

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

作者：XError＿xiaoyu

这篇文章主要介绍了Axios的基本使用,包括异步编程的基础知识,如Promise的介绍、特点和基本用法,以及如何使用then、catch和async/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中的多线程+线程结果回调！

2.2 特点 

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

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

3. Promise 基本用法

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

3.1 Promise then

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

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

如图所示:

总结

到此这篇关于Vue3数据交互之promise用法详解的文章就介绍到这了,更多相关Vue3数据交互promise详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文