JavaScript 解决并发回调地狱

我们有一个需求需要我们2秒打印1，接着再一秒打印2，再一秒打印3

如果我们直接这样写

        setTimeout(() => {
            console.log(1);
        }, 2000);
        setTimeout(() => {
            console.log(2);
        }, 1000);
        setTimeout(() => {
            console.log(3);
        }, 1000);

这样是肯定不行的，这样是一个异步代码，他们不会同时进行。

传统的嵌套可读性非常差，这时就需要使用promise来解决这种回调地狱问题，如何解决呢？

Promise

Promise是⼀个类,⽤来包装异步操作,根据异步操作的结果,是成功还是失败,
进⽽决定Promise是成功还是失败;Promise⽀持链式调⽤,从⽽消除回调地狱

Promise的状态
1. 只能由 Pending -> Fulfilled ,或 Pening -> Rejected
2. Promise的状态 ⼀旦确定, 就不可改变了

        //封装一个函数 可以获取一个promise的对象 num是传入的参数，duration为等待的事件
        function delay(num,duration) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                resolve(num);//duration秒后将resolve标记为真传入括号里面跟跟着的是回调函数的参数，如果标记为真就会执行对应的回调函数
                }, duration);
            });
        }
        delay(1,2000).then(message1=>{
            console.log(message1); //每次在执行回调函数时会再去返回一个promise对象，以下如此
            return delay(2,1000)
        }).then(message2=>{
            console.log(message2);
            return delay(3,1000)}).then(message3=>{
            console.log(message3);
        });

Async+Await异步终极解决⽅案
 

// 语法
async function log() {// 1、在Promise实例前添加 await 关键字, 那么await的返回值就是当前
// Promise的resolve参数
// 2、await所在的函数必须被async修饰
// 3、async函数内, 当前await执⾏结束了,代码才会继续往后执⾏(同步的⽅式执⾏）
const n1 = await delay(2000, 1)
console.log(n1)
}
log()

所以我们最终代码这样写

function delay(num,duration) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                resolve(num);//duration秒后将resolve标记为真，传入括号里面跟跟着的是回调函数的参数，如果标记为真就会执行对应的回调函数
                }, duration);
            });
        }

        async function log()
        {
            const a=await delay(1,2000);
            console.log(a);
            const b= await delay(2,1000);
            console.log(b);
            const c= await delay(3,1000);
            console.log(c);
        }
        log();

原文地址：https://blog.csdn.net/zgwnb666/article/details/145037643

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！