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>

总结

踩坑路漫漫长@~@

相关推荐
快起来别睡了1 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
Humbunklung3 分钟前
Rust枚举:让数据类型告别单调乏味
开发语言·后端·rust
Y1nhl6 分钟前
力扣_链表_python版本
开发语言·python·算法·leetcode·链表·职场和发展
乌兰麦朵11 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai11 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风11 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾12 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿13 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸13 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic14 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端