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>

总结

踩坑路漫漫长@~@

相关推荐
半开半落4 分钟前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
百事老饼干11 分钟前
Java[面试题]-真实面试
java·开发语言·面试
理想不理想v31 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我32 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记1 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜1 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧1 小时前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js