【前端,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 的问题。

相关推荐
鲸鱼146665707541917 小时前
Screeps TypeScript 教程:使用 tsup 解决模块加载问题并实现自动化部署
typescript
张志鹏PHP全栈2 天前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript
Toomey2 天前
别再用 Parameters 乱推断了!vue-i18n 封装 t 函数的正确姿势
typescript
郑板桥302 天前
ts学习1
学习·typescript
前端拿破轮2 天前
女朋友要和我分手?!!居然是因为交不出赎金信,不会用哈希表😭😭😭
算法·leetcode·typescript
知识分享小能手2 天前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈2 天前
TypeScript 第三天,TypeScript中的类型(二)
typescript
成遇3 天前
Eslint基础使用
javascript·typescript·es6
张志鹏PHP全栈3 天前
TypeScript 第二天,TypeScript中的类型(一)
typescript
極光未晚3 天前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript