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>

总结

踩坑路漫漫长@~@

相关推荐
Alive~o.08 分钟前
Go语言进阶&依赖管理
开发语言·后端·golang
花海少爷10 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
手握风云-11 分钟前
数据结构(Java版)第二期:包装类和泛型
java·开发语言·数据结构
Amd79414 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You23 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
喵叔哟30 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
狸克先生34 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生36 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
sinat_3842410937 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图