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>

总结

踩坑路漫漫长@~@

相关推荐
mCell19 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip19 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript