TypeScript 项目中的 Promise 全面解析

前言

在现代 JavaScript 开发中，Promise 已成为处理异步操作的核心工具。本文将深入探讨 Promise 的概念、优势以及在 TypeScript 中的实际应用，帮助开发者更好地理解和运用这一重要特性。

同步与异步的困境

同步代码的简洁性

我们先看一个同步读取 JSON 文件的例子：

import fs = require('fs');

function loadJSONSync(filename: string) {
    return JSON.parse(fs.readFileSync(filename));
}

// 有效JSON文件
console.log(loadJSONSync('good.json'));

// 不存在的文件
try {
    console.log(loadJSONSync('absent.json'));
} catch (err) {
    console.log('absent.json error', err.message);
}

// 无效JSON文件
try {
    console.log(loadJSONSync('invalid.json'));
} catch (err) {
    console.log('invalid.json error', err.message);
}

这种同步方式简单直观，错误处理通过 try/catch 即可完成。

异步回调的复杂性

当我们尝试将其转换为异步版本时，问题开始显现：

import fs = require('fs');

function loadJSON(filename: string, cb: (error: Error, data: any) => void) {
    fs.readFile(filename, function(err, data) {
        if (err) cb(err);
        else cb(null, JSON.parse(data));
    });
}

这种实现存在严重问题：如果 JSON.parse 抛出错误，回调不会被调用，应用会崩溃。

Promise 的解决方案

Promise 基础

Promise 有三种状态：

1. pending（等待中）
2. fulfilled（已成功）
3. rejected（已失败）

创建 Promise 的基本方式：

const promise = new Promise((resolve, reject) => {
    // 使用 resolve/reject 控制 Promise 状态
});

结果处理

使用 .then 处理成功情况，.catch 处理失败情况：

Promise.resolve(123)
    .then((res) => {
        console.log(res); // 123
    });

Promise.reject(new Error("错误"))
    .catch((err) => {
        console.log(err.message); // "错误"
    });

Promise 链

Promise 的真正威力在于链式调用：

Promise.resolve(123)
    .then((res) => {
        console.log(res); // 123
        return 456;
    })
    .then((res) => {
        console.log(res); // 456
        return Promise.resolve(789);
    })
    .then((res) => {
        console.log(res); // 789
    });

错误处理可以集中到一个 catch 中：

Promise.reject(new Error('错误'))
    .then((res) => {
        console.log(res); // 不会执行
        return 456;
    })
    .catch((err) => {
        console.log(err.message); // "错误"
    });

TypeScript 中的 Promise

TypeScript 能智能推断 Promise 链中的类型：

Promise.resolve(123)
    .then((res) => {  // res 被推断为 number
        return true;   // 返回 boolean
    })
    .then((res) => {  // res 被推断为 boolean
        console.log(res);
    });

对于返回 Promise 的函数，TypeScript 也能正确处理类型：

function delayedHello(): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Hello"), 1000);
    });
}

Promise.resolve(123)
    .then((res) => {          // res 是 number
        return delayedHello(); // 返回 Promise<string>
    })
    .then((res) => {          // res 是 string
        console.log(res);      // "Hello"
    });

实用技巧

回调函数转 Promise

将回调风格的函数转换为返回 Promise 的函数：

import fs = require('fs');

function readFileAsync(filename: string): Promise<any> {
    return new Promise((resolve, reject) => {
        fs.readFile(filename, (err, result) => {
            if (err) reject(err);
            else resolve(result);
        });
    });
}

JSON 示例的 Promise 实现

使用 Promise 重写 loadJSON 函数：

function loadJSONAsync(filename: string): Promise<any> {
    return readFileAsync(filename)
        .then((res) => JSON.parse(res));
}

使用示例：

loadJSONAsync('good.json')
    .then((val) => console.log(val))
    .catch((err) => console.log('error:', err.message));

并行控制

使用 Promise.all 处理并行任务：

// 串行执行，总时间约2秒
loadItem(1)
    .then((item1) => loadItem(2))
    .then((item2) => console.log('done'));

// 并行执行，总时间约1秒
Promise.all([loadItem(1), loadItem(2)])
    .then(([item1, item2]) => console.log('done'));

使用 Promise.race 获取最先完成的结果：

Promise.race([task1, task2])
    .then((value) => console.log(value)); // 输出先完成的任务结果

总结

Promise 为 JavaScript 异步编程带来了革命性的改进：

1. 更清晰的代码结构
2. 更直观的错误处理
3. 更优雅的链式调用
4. 更好的类型支持（在 TypeScript 中）

通过合理运用 Promise 及其相关方法，开发者可以编写出更健壮、更易维护的异步代码。TypeScript 的类型系统与 Promise 的结合，更是为大型应用开发提供了强有力的支持。