promise,async →await,then→catch,try→catch 使用简介

提示:promise,async →await,then→catch,try→catch 使用简介

文章目录

  • 前言
  • 一、Promise
  • [二、promise then/catch](#二、promise then/catch)
  • [三、promise async/await try/catch](#三、promise async/await try/catch)
  • 总结

前言

需求:promise,async →await,then→catch,try→catch 使用简介

一、Promise

w3c-school-promise介绍

Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。

c 复制代码
//新建一个 Promise 对象
new Promise(function (resolve, reject) {
    // 需要执行的任务代码块
    //resolve promise里代码全部执行成功时调用
	//reject  promise里代码出现异常时调用
});

示例:

c 复制代码
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="text-align: center;">promise</div>
    <script>
        let num  = 3;
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                if(num>5){
	                resolve({
	                    msg:`2秒后 num=${num}大于5  执行的resolve`
	                })
                }else{
	                reject({
	                    msg:`2秒后 num=${num}小于等于5  执行的reject`
	                });
                }
            },1000);
        });
    </script>
</body>
</html>

因为没有捕获异常,所以浏览器把异常抛出来了

二、promise then/catch

then:执行resolve后,进入then

catch :执行reject后,进入catch

1、执行resolve后,进入then

c 复制代码
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="text-align: center;">promise</div>
    <div style="text-align: center;">then catch</div>
    <script>
        let num  = 6;
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                if(num>5){
                resolve({
                    msg:`2秒后 num=${num}大于5  执行的resolve`
                })
                }else{
                reject({
                    msg:`2秒后 num=${num}小于等于5  执行的reject`
                });
                }
            },1000);
        }).then(data=>{
            console.log(data,'then success')
        }).catch(err=>{
            console.log(err,'catch err')
        })
    </script>
</body>
</html>

2、执行reject后,进入catch

c 复制代码
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="text-align: center;">promise</div>
    <div style="text-align: center;">then catch</div>
    <script>
        let num  = 3;
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                if(num>5){
                resolve({
                    msg:`2秒后 num=${num}大于5  执行的resolve`
                })
                }else{
                reject({
                    msg:`2秒后 num=${num}小于等于5  执行的reject`
                });
                }
            },1000);
        }).then(data=>{
            console.log(data,'then success')
        }).catch(err=>{
            console.log(err,'catch err')
        })
    </script>
</body>
</html>

三、promise async/await try/catch

try:执行resolve后,进入try

catch :执行reject后,进入catch

1、try接收resolve

c 复制代码
//只有async函数的内部,才可以使用await函数    
//await 把函数返回的PromiseObject转化成普通object
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="text-align: center;">promise</div>
    <div style="text-align: center;">try catch</div>
    <script>
        function testPromise(num){
           return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    if(num>5){
                    resolve({
                        msg:`2秒后 num=${num}大于5  执行的resolve`
                    })
                    }else{
                    reject({
                        msg:`2秒后 num=${num}小于等于5  执行的reject`
                    });
                    }
                },1000);
            })
        }
        async function testTry(num){
            try{
                const data = await testPromise(num);
                console.log(data,'try success');
            }catch(err){
                console.log(err,'catch err');
            }
        }
        testTry(6)
    </script>
</body>
</html>

2、catch接收reject

c 复制代码
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="text-align: center;">promise</div>
    <div style="text-align: center;">try catch</div>
    <script>
        function testPromise(num){
           return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    if(num>5){
                    resolve({
                        msg:`2秒后 num=${num}大于5  执行的resolve`
                    })
                    }else{
                    reject({
                        msg:`2秒后 num=${num}小于等于5  执行的reject`
                    });
                    }
                },1000);
            })
        }
        async function testTry(num){
            try{
                const data = await testPromise(num);
                console.log(data,'try success');
            }catch(err){
                console.log(err,'catch err');
            }
        }
        testTry(3)
    </script>
</body>
</html>

总结

踩坑路漫漫长@~@

相关推荐
Sylvia-girl1 小时前
Java——抽象类
java·开发语言
Yana.nice3 小时前
Bash函数详解
开发语言·chrome·bash
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
tomorrow.hello5 小时前
Java并发测试工具
java·开发语言·测试工具
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊5 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
她说人狗殊途6 小时前
java.net.InetAddress
java·开发语言