Promise的常用示例(解决callback hell)

回调地狱(callback hell)

由于js是运行在单线程的原因,因此所有耗时的处理,都必须异步,否则会阻塞当前的流程。因此,我在写小程序的时候,通过大量使用callback回调去处理数据,这就导致了嵌套太多,代码的可读性很差。


// 模拟器网络请求处理数据
function request(a: number, b: number, callback: (res: number) => void): void {
    // 模拟2s之后处理返回结果
    setTimeout(() => {
        callback(a + b)
    }, 2000)
}

// 首次请求处理数据
request(2, 3, res1 => {
    console.log('2+3', res1)
    // 数据返回,在次请求处理
    request(res1, 4, res2 => {
        // 数据返回,进行其他逻辑处理
        console.log('2+3+4', res2)
        // 处理完数据,再次请求校验
        request(res2, 5, res3 => {
            // 最终数据返回,
            console.log('2+3+4+5', res3)
        })
    })
})

console.log('hahah')

最终的输出结果是:

hahah
2+3 5
2+3+4 9
2+3+4+5 14

setTimeout 也好理解,因为是单线程,没办法直接sleep,因此必须以闭包的形式在内部延迟处理,而不阻塞主流程,dart里面的延迟也是类似操作

用Promise处理的版本:

// 模拟器网络请求处理数据
function request(a: number, b: number): Promise<number> {
    return new Promise((resolve, reject) => {
        // reject 处理异常
        if (b == 7) {
            reject(`${b} is a bad num`)
        }
        // 模拟2s之后处理返回结果
        setTimeout(() => {
            //resolve 处理正常
            resolve(a + b)
        }, 2000)
    })
}

request(2, 3).then((res1) => {
    // 数据返回,在次请求处理
    console.log('2+3', res1)
    return request(res1, 4)
}).then((res2) => {
    // 数据返回,在次请求处理
    console.log('2+3+4', res2)
    return request(res2, 5)
}).then((res3) => {
    // 最终数据返回,
    console.log('2+3+4+5', res3)
}).catch((err) => {
    // 捕获err
    console.log('错误情况:', err)
})

console.log('hahah')

这样看起来,整体比较连贯,而且,可以统一在catch 里面处理异常情况

Promise的串联(Promise.all)

场景就是某个页面需要多个请求,在几个请求回调之后统一处理界面更新

// 模拟器网络请求处理数据
function request(a: number, b: number): Promise<number> {
    return new Promise((resolve, reject) => {
        // reject 处理异常
        if (a == 7) {
            reject(`${a} is a bad num`)
        }
        // 模拟2s之后处理返回结果
        setTimeout(() => {
            //resolve 处理正常
            resolve(a + b)
        }, 2000)
    })
}

Promise.all([request(2, 3), request(4, 5)]).then((res1) => {
    // a,b 分别是两个请求的结果
    const [a, b] = res1;
    // 再次处理请求数据
    return request(a, b);
}).then((res2) => {
    // 最终的数据
    console.log('最终的结果:', res2)
}).catch((err) => {
    // 异常处理
    console.log('err:', err)
})

console.log('hahah')

 

版权声明:
作者:Amber
链接:https://late.run/archives/153
来源:LATE-努力努力再努力
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录