Promise与async/await的区别

这次,彻底搞懂Promise和async/await。

Promise已经比传统的回调函数(Callback Hell)更先进,那后来为社么又出现async/await了呢?

async/await的出现是为了让异步代码写起来更像同步代码,解决Promise在复杂场景下的嵌套问题和可读性问题,让我们能更轻松地编写和维护异步逻辑。

Notes:
* async/await 底层仍然是 Promise,只是写法更简洁。
* await 只能在 async 函数中使用,否则会报错。
* async 函数总是返回 Promise。
* await 会阻塞当前 async 函数的执行,但不会阻塞整个程序。

举例: 比如入门Web3项目开发,必须要先学会Next.js、ethers.js、Solidity、Go, 才能做智能合约开发。基础代码如下:

function learnNextJs() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("1. 已完成 Next.js 学习");
            resolve();
        }, 1000);
    });
}

function learnEthersJs() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("2. 已完成 ethers.js 学习");
            resolve();
        }, 1500);
    });
}

function learnSolidity() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("3. 已完成 Solidity 学习");
            resolve();
        }, 2000);
    });
}

function learnGo() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("4. 已完成 Go 学习(可选)");
            resolve();
        }, 500);
    });
}

然后使用 Promise 链式调用(必须按顺序学习)

learnNextJs()
.then(() => learnEthersJs())
.then(() => learnSolidity())
.then(() => learnGo())
.then(() => {
    console.log("恭喜!你现在可以开发完整的 Web3 项目了!");
})
.catch((error) => {
    console.log("学习过程中出错:", error);
});

输出结果是:
1. 已完成 Next.js 学习
2. 已完成 ethers.js 学习
3. 已完成 Solidity 学习
4. 已完成 Go 学习(可选)
恭喜!你现在可以开发完整的 Web3 项目了!

那如果换成async/await方式呢?

async function web3LearningPath() {
    try {
        // 必须按顺序学习
        await learnNextJs();       // 等待第一步完成
        await learnEthersJs();    // 然后学习第二步
        await learnSolidity();    // 接着学习第三步
        
        // Go 是可选的,可以并行学习
        const optionalLearning = learnGo(); // 不等待,继续执行后面代码
        
        console.log("正在同时学习 Solidity 和 Go...");
        
        await optionalLearning; // 如果需要确保Go也学完才继续
        
        console.log("恭喜!你现在可以开发完整的 Web3 项目了!");
        
        // 现在可以开始智能合约开发了
        await startSmartContractDevelopment();
    } catch (error) {
        console.log("学习过程中出错:", error);
    }
}

// 启动学习流程
web3LearningPath();

async function startSmartContractDevelopment() {
    console.log("开始智能合约开发...");
}

则输出结果为:
1. 已完成 Next.js 学习
2. 已完成 ethers.js 学习
3. 已完成 Solidity 学习
正在同时学习 Solidity 和 Go…
4. 已完成 Go 学习(可选)
恭喜!你现在可以开发完整的 Web3 项目了!
开始智能合约开发…

最后:
Promise是基础,所有异步操作最终都是Promise,async/await是更优雅的写法,让异步代码更易读。在 Web3 开发中,大部分情况应使用async/await。