【前端,TypeScript】TypeScript速成(八):Promise

Promise

前端编程是一个单线程的模型,但是其中包含许多异步的动作,异步的动作应该通过以下四步来完成:

  • 发起请求;
  • 事件处理函数结束;
  • 请求结束;
  • 进入回调函数;

上述的基于回调函数解决方案不够好,当事件请求过多时,可能会产生 Callback Hell 现象。使用 Promise 可以解决回调函数的问题。

Promise 的创建和使用

我们首先来看一个回调函数的例子,在这个例子中,我们在回调函数中进行简单的 number 加法:

typescript 复制代码
function add(a: number, b: number, callback: (res: number) => void): void {
    setTimeout(() => {
        callback(a + b)
    }, 2000)
}

add(2, 3, res => {
    console.log('2 + 3', res)
    add(res, 4, res2 => {
        console.log('2 + 3 + 4', res2)
    })
})

程序将先后输出:

typescript 复制代码
[LOG]: "2 + 3",  5 
[LOG]: "2 + 3 + 4",  9 

现在我们将回调函数改为 Promise:

typescript 复制代码
function add(a: number, b: number): Promise<number> {
    return new Promise(
        (resolve, reject) => {
            setTimeout(() => {
                resolve(a + b)
            }, 2000)
        }
    )
}

add(2, 3).then(res => {
    console.log('2 + 3', res)
})

可以使用 then 方法来完成多个计算结果的顺序打印:

typescript 复制代码
function add(a: number, b: number): Promise<number>{
    return new Promise(
        (resolve, reject) => {
            if(b % 17 == 0) {
                reject(`bad number ${b}`)
            }
            setTimeout(
                () => {
                    resolve(a + b)
                }, 2000
            )
        }
    )
}

function mul(a: number, b: number): Promise<number>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a * b)
        }, 3000)
        // resolve(a * b)
    })
}

// (2 + 3) * 4 + 5
add(2, 3).then(res => {
    console.log("2 + 3", res)
    return mul(res, 5)
}).then(res => {
    console.log("(2 + 3) * 4", res)
    return add(res, 5)
}).then(res => {
    console.log("(2 + 3) * 4 + 5", res)
    return add(res, 17)
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

输出的结果是:

typescript 复制代码
[LOG]: "2 + 3",  5 
[LOG]: "(2 + 3) * 4",  25 
[LOG]: "(2 + 3) * 4 + 5",  30 
[LOG]: "bad number 17" 

需要注意的是,在使用 then 方法时,一定要在 then 作为参数的箭头函数当中将下一步要做的行为返回出去,这样才能创建多个 Promise。

同时等待多个 Promise

现在我们希望通过 Promise 来计算(2 + 3) * (4 + 5)的结果,使用 Promise.all 方法来完成:

typescript 复制代码
// (2+3)*(4+5)
Promise.all([add(2, 3), add(4, 5)]).then(res => {
    let [a, b] = res
    return mul(a, b)
}).then(res => {
    console.log("(2+3)*(4+5)", res)
})

可以使用 Promise.race 来看哪个 Promise 首先执行完毕:

typescript 复制代码
Promise.race([add(2, 3), add(4, 5)]).then(res => {
    console.log(res)
})

Promise 最大的用处是将多种行为串联起来,可以解决 Callback Hell 的问题。

相关推荐
MiyueFE20 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio1 天前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈1 天前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
土豆骑士4 天前
简单理解Typescript 装饰器
前端·typescript
ttod_qzstudio4 天前
彻底移除 HTML 元素:element.remove() 的本质与最佳实践
前端·javascript·typescript·html