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')