Promise、async和await的使用

m0_74818265

于 2024-08-11 02:10:48 发布

阅读量460

点赞数 19

文章标签：前端 javascript vscode

本文链接：https://blog.csdn.net/m0_74818265/article/details/141098958

版权

Promise 简介

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

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

Promise对象有以下两个特点。

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

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

Promise 用法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         /*  
        1.实例化promise对象,并且执行(类似Java创建线程对象,并且start)
        参数: resolve,reject理论是可以随意命名,但是一般这么叫!
        参数: resolve,reject分别处理成功和失败的两个函数! 成功resolve(结果)  失败reject(结果)
        参数: 在function中调用这里两个方法,那么promise会处于两个不同的状态
        状态: promise有三个状态
                pending   正在运行
                resolved  内部调用了resolve方法
                rejected  内部调用了reject方法
        参数: 在第二步回调函数中就可以获取对应的结果 
        */
        let promise = new Promise(function (resolve,reject){
            console.log("function invoked");

            //成功
            resolve("hahaha")
            //失败
            //reject("oh no")
            //抛出异常
            throw new Error("error")
            
        })

        /* 
        then中可以有两个方法，第一个resolve()的对应方法，第二个时reject()的对应方法
        then中的reject()的对应方法可以在产生异常时执行,接收到的就是异常中的提示信息
        then中可以只留一个resolve()的对应方法,reject()方法可以用后续的catch替换
        then中的reject对应的回调函数被后续的catch替换后,catch中接收的数据是一个异常对象
        */

        promise.then(
            function (value){
                console.log("promise success:"+value)
            }
        ).catch(
            function (value){
                console.log("promise catch:" + value);
                
            }
        )

        console.log("code1 invoked")
        console.log("code2 invoked")
    </script>
</head>
<body>
    
</body>
</html>

成功截图：

失败时：

抛出异常时：

async和await的使用

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

async 用于标识函数的

async 可以帮助我们用简洁的语言获得一个promise对象

在async标识函数后,async函数的返回值会变成一个promise对之前获得promise对象是 let promise = new Promise(function (resolve,reject){}）用async是： async function aaa{}
如果函数内部返回的数据是一个非promise对象,async函数的结果会返回一个成功状态 promise对象
如果函数内部返回的是一个promise对象,则async函数返回的状态与结果由该对象决定
如果函数内部抛出的是一个异常,则async函数返回的是一个失败的promise对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        async function fun1() {

            //函数内部返回的数据是一个非promise对象,async函数的结果会返回一个成功状态 promise对象
            //return 10

            //函数内部返回的是一个promise对象,则async函数返回的状态与结果由该对象决定
            //return Promise.resolve("yes")

            //函数内部抛出的是一个异常,则async函数返回的是一个失败的promise对象
            throw new Error("something wrong")
        }

        let promise = fun1()
        promise.then(
            function (value){
                console.log("promise success:"+value)
            }
        ).catch(
            function (value){
                console.log("promise fail:" + value);
                
            }
        )

        
        console.log("code1 invoked")
        console.log("code2 invoked")
    </script>
</head>
<body>
    
</body>
</html>

函数内部返回的数据是一个非promise对象,async函数的结果会返回一个成功状态 promise对象:

函数内部返回的是一个promise对象,则async函数返回的状态与结果由该对象决定:

函数内部抛出的是一个异常,则async函数返回的是一个失败的promise对象:

await

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

await右侧的表达式一般为一个promise对象,但是也可以是一个其他值
如果表达式是promise对象,await返回的是promise成功的值
await会等右边的promise对象执行结束,然后再获取结果,后续代码也会等待await的执行
如果表达式是其他值,则直接返回该值
await必须在async函数中,但是async函数中可以没有await
如果await右边的promise失败了,就会抛出异常,需要通过 try ... catch捕获处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        async function fun1() {

             return 10

         
        }

        /*
        1.await 右边如果是一个普通值，则返回该值
            let res = await "张三"
            如果右边是promise，返回promise成功状态的结果
            let res = await Promise.resolve("张三")
                res = "张三"
        2.await 右边如果是一个失败状态的promise 那么await会直接抛出异常
        3.await 关键字必须在await必须在async修饰的函数中使用，async函数中可以没有await
        4.await后边代码会等待await执行完毕继续执行
        */
        async function fun2() {
            let res
            try {
                //成功
                //res = await Promise.resolve("success")
                //失败
                res = await Promise.reject("someting wrong")
            } catch (error) {
                console.log("catch got:"+error)
            }
            console.log("await got:" + res)
            
                
        }

        fun2()
        
        console.log("code1 invoked")
        console.log("code2 invoked")
    </script>
</head>
<body>
    
</body>
</html>

成功：

失败：

m0_74818265

关注

19
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Promise、async和await的使用

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

扫一扫