JavaScript中异步的方法

在 JavaScript 中，异步编程的主要方式包括 回调函数 (callback)、Promise 和 async/await。以下是它们的用法和例子：

1. 回调函数 (Callback)

回调是最早的异步编程方式。通过将一个函数作为参数传递给另一个函数，来在计时完成后调用它。

function doSomethingAsync(callback) {
    setTimeout(() => {
        console.log("计时完成");
        callback(); // 调用回调函数
    }, 1000);
}

doSomethingAsync(() => {
    console.log("回调函数执行");
});

缺点：嵌套深时可能会导致“回调地狱”（代码难以维护）。

2. Promise

Promise 是 ES6 引入的一种更优雅的异步编程方式，用于管理异步操作的状态（pending、fulfilled 或 rejected）。

示例：

function doSomethingAsync() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve("任务成功");
            } else {
                reject("任务失败");
            }
        }, 1000);
    });
}

// 使用 .then 和 .catch
doSomethingAsync()
    .then(result => {
        console.log(result); // 输出: 任务成功
    })
    .catch(error => {
        console.error(error);
    });

如果想偷懒可以这样写：

// 使用 .then 和 .catch
new Promise((resolve, reject) => {
    setTimeout(() => {
        const success = true;
        if (success) {
            resolve("任务成功");
        } else {
            reject("任务失败");
        }
    }, 1000);
})
    .then(result => {
    console.log(result); // 输出: 任务成功
})
    .catch(error => {
    console.error(error);
});

3. async/await

async/await 是基于 Promise 的语法糖，提供了更清晰、更同步化的写法。async 表示函数是异步的，await 等待 Promise 完成。

示例：

function doSomethingAsync() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve("任务成功");
            } else {
                reject("任务失败");
            }
        }, 1000);
    });
}

async function main() {
    try {
        const result = await doSomethingAsync(); // 等待 Promise 完成
        console.log(result); // 输出: 任务成功
    } catch (error) {
        console.error(error);
    }
}

main();

还可以这样写：

async function main() {
    try {
        const result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                const success = true;
                if (success) {
                    resolve("任务成功");
                } else {
                    reject("任务失败");
                }
            }, 1000);
        }); // 等待 Promise 完成
        console.log(result); // 输出: 任务成功
    } catch (error) {
        console.error(error);
    }
}

main();

4. 关于Promise里的resolve, reject：

resolve 和 reject 是 JavaScript 中 Promise 构造函数所提供的两个回调函数，用来改变 Promise 的状态。它们分别用于标志 Promise 成功完成或失败。

1. resolve

• 用于将 Promise 的状态从 pending（进行中）变为 fulfilled（已完成）。
• 调用 resolve(value) 会将成功的值传递给后续的 .then() 方法。

示例：

const promise = new Promise((resolve, reject) => {
    // 模拟异步操作成功
    setTimeout(() => {
        resolve("操作成功！"); // 将 Promise 状态改为 fulfilled
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出: 操作成功！
});

运行流程：

1. resolve("操作成功！") 被调用。

2. Promise 状态变为 fulfilled，并传递 “操作成功！” 给 .then() 的回调函数。

2. reject

• 用于将 Promise 的状态从 pending（进行中）变为 rejected（已拒绝）。
• 调用 reject(error) 会将错误原因传递给后续的 .catch() 方法。

示例：

const promise = new Promise((resolve, reject) => {
    // 模拟异步操作失败
    setTimeout(() => {
        reject("操作失败！"); // 将 Promise 状态改为 rejected
    }, 1000);
});

promise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error); // 输出: 操作失败！
    });

运行流程：

1. reject("操作失败！") 被调用。
2. Promise 状态变为 rejected，并将错误传递给 .catch() 的回调函数。