js的三种异步方法

三种异步函数问题及解决方案

// 示例展示了一个函数中存在的异步问题。
// 在这个例子中，我们的函数并没有返回任何值，因为setTimeout是异步的。
let fn = () => {
    let name = '张三';
    setTimeout(() => {
        return name;
    }, 1000);
}
console.log(fn()); // 输出: undefined

1. 使用回调函数解决异步问题

// 为了解决上面的异步问题，我们可以使用回调函数。
// 通过传递一个回调函数给fnCallback，当异步操作完成后就会执行这个回调。
let fnCallback = (callback) => {
    let name = '张三fnCallback';
    setTimeout(() => {
        callback(name);
    }, 1000);
}
fnCallback((data) => {
    console.log(data); // 输出: 张三fnCallback
});

2. 使用Promise解决异步问题

// Promise是一个常用的方式来处理异步操作。
// 当异步操作完成时，我们可以使用.then来处理结果。
let fbPromise = new Promise((success, error) => {
    let name = '张三fbPromise';
    setTimeout(() => {
        success(name);
    }, 1000);
})
fbPromise.then((data) => {
    console.log(data); // 输出: 张三fbPromise
});

3. 使用async和await解决异步问题

// 使用async和await可以使我们的异步代码看起来像同步代码。
// 这里我们定义了一个async函数，然后在另一个async函数里使用await来等待它完成。
let fbAsync = async () => {
    let name = '张三fbAsync';
    return new Promise((success, error) => {
        setTimeout(() => {
            success(name);
        }, 1000);
    })
}
async function main() {
    let abc = await fbAsync();
    console.log(abc); // 输出: 张三fbAsync
}
main();