前言(可以跳转解决地狱回调的问题👇🔗)

Promsie和Async await解决地狱回调

一、Promise是什么?

首先 Promise 是es6 里面的一个新语法, 是一个构造函数,有all、reject、resolve、allsettled、race等Api.

最基本的用法我们先用到 reject(英文:拒绝) resolve(英文:决定,决心) 我们通常认为 reject是不通过 , resolve是通过

二、Promise的用法如下(resolve)

创建 new Promise()实例,如下代码所示:

<script>
    //第一种用法 es5中的普通用法
    new Promise(function(resolve, reject) {
        //异步操作
    });
    //第二种用法 es6 中的箭头函数
    new Promise((resolve, reject) => {
        //异步操作
    })
</script>

1.promise的操作演示如下

这里用的是resolve,其中用的最多的也是es6的箭头函数 正常写法: ()=>{} , 一个参数(res)的写法: res =>
{console.log(res)}

<script>
    ;
    /* 下面的代码是描述,如何使用 new Promise() 进行封装操作
    代码是正常执行向下的2次异步操作封装

    同样 reject --对应的 catch 用法类似
    */

    //定义 Promise (网络封装请求)
    new Promise((resolve, reject) => {
        //用setTimeout模拟进行一步操作
        setTimeout(() => {
            //传递参数从resolve=>then  reject=>catch同理
            resolve('我是setTimeOut -01')
        }, 1000);
        //调用resove后,执行一次then()
    }).then((res) => {
        //打印参数res
        console.log(res)

        //通过return 再次创建Promise (网络封装)   
        //可以直接使用 return Promise.resolve() 进行简化操作
        return new Promise((resolve, reject) => {
            //模拟异步操作
            setTimeout(() => {
                //调用resolve,并传递参数
                resolve('我是setTimeOut -02')
            }, 1000);
            //then()  使用的是箭头函数  es6的语法 完整版 (res1)=>{console.log(res1)}
        }).then(res1 => console.log(res1))
    })
</script>

2.reject的用法如下

reject() 是失败调用的,用法与resolve的用法类似,类比一下就可以正常使用了!(没有写演示)

总结

后续这里会进行一个更新,补充上Promsie的其他Api,希望可以继续努力

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐