在 Babylon.js 中使用 TypeScript 的 async 、Promise和 await 配合与 Unity 的 IEnumerator 和 yield return 配合对比

原创

已于 2025-08-20 16:09:55 修改 · 1k 阅读

于 2025-02-08 14:51:17 首次发布

Babylon.js 作为一款强大的 3D 渲染引擎，结合 TypeScript 的类型系统，提供了非常优雅的异步编程方式。与此同时，Unity 开发者对 IEnumerator 和 yield return 的使用也非常熟悉。本文将通过几个典型例子，展示在 Babylon.js 中如何使用 async 、Promise和 await ，并对比 Unity 中的 IEnumerator 和 yield return 的使用方式。

一、关于Promise

这里需要先说说Promise，以帮助更好的理解async 、Promise和 await相互配合的执行顺序。

在 TypeScript 中，Promise 是一种用于处理异步操作的对象。它代表了一个尚未完成，但在未来某个时间点会完成的操作。Promise 有三种状态：

pending（进行中）：初始状态，既不是成功，也不是失败状态。
fulfilled（已成功）：意味着操作成功完成。
rejected（已失败）：意味着操作失败。

一旦 Promise 状态从 pending 变为 fulfilled 或者 rejected，它的状态就会被锁定，不能再改变。

基本语法

Promise 构造函数接受一个执行器函数（Executor Function），执行器函数是 Promise 的核心部分，是一个同步执行的函数，它定义了异步操作的逻辑，并决定了 Promise 的最终状态，其在 Promise 被创建时立即同步执行，该函数有两个参数：resolve 和 reject。resolve 是一个函数，用于将 Promise 的状态从 pending 变为 fulfilled，并传递一个值；reject 也是一个函数，用于将 Promise 的状态从 pending 变为 rejected，并传递一个错误信息。这里需要说明一下，resolve和reject只是两个形参的名字，它们不一定叫这个名字，理论上来说任何合法的变量名都可以，只是大家习惯用resolve和reject。

const myPromise: Promise<number> = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        const randomNumber = Math.random();
        if (randomNumber > 0.5) {
            // 操作成功，将 Promise 状态变为 fulfilled
            resolve(randomNumber);
        } else {
            // 操作失败，将 Promise 状态变为 rejected
            reject(new Error('Random number is less than or equal to 0.5'));
        }
    }, 1000);
});

// 使用 then 方法处理成功结果，catch 方法处理失败结果
myPromise
   .then((result: number) => {
        console.log('Success:', result);
    })
   .catch((error: Error) => {
        console.log('Error:', error.message);
    });

Promise 的链式调用

Promise 的强大之处在于可以进行链式调用，通过 then 方法返回一个新的 Promise，从而实现多个异步操作的顺序执行。

function asyncOperation1(): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Async operation 1 completed');
            resolve(1);
        }, 1000);
    });
}

function asyncOperation2(value: number): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Async operation 2 completed');
            resolve(value + 1);
        }, 1000);
    });
}

function asyncOperation3(value: number): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Async operation 3 completed');
            resolve(value + 1);
        }, 1000);
    });
}

asyncOperation1()
   .then((result1: number) => asyncOperation2(result1))
   .then((result2: number) => asyncOperation3(result2))
   .then((finalResult: number) => {
        console.log('Final result:', finalResult);
    })
   .catch((error: Error) => {
        console.log('Error:', error.message);
    });