当前位置：首页 > article >正文

通过Promise和async/await解决异步操作 - 2024最新版前端秋招面试短期突击面试题

article 2024/10/31 20:03:32

通过Promise和async/await解决异步操作 - 2024最新版前端秋招面试短期突击面试题【100道】 🌀

在JavaScript中，处理异步操作有多种解决方案。以下是一些常见的异步处理方式，包括回调函数、Promise、async/await等。在现代JavaScript开发中，Promise和async/await被广泛使用，因为它们提供了更优雅和易于理解的方式来处理异步操作。

1. 回调函数（Callbacks） 🔄

最传统的异步处理方式是通过回调函数。你将一个函数作为参数传递给另一个函数，当异步操作完成时，这个回调函数会被调用。

示例代码

function fetchData(callback) {
    // 模拟异步操作，比如AJAX请求
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData(function(data) {
    console.log(data); // 输出: 'Data fetched'
});

2. Promise 🌈

Promise是ES6中引入的，用于更优雅地处理异步操作。Promise代表了一个可能还没有完成，但将来会完成的操作。

示例代码

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // 输出: 'Data fetched'
    })
    .catch(error => {
        console.error(error);
    });

3. async/await ⏳

async/await是ES2017中引入的，它建立在Promise之上，使得异步代码的编写看起来像同步代码。

示例代码

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 2000);
    });
}

async function run() {
    const data = await fetchData();
    console.log(data); // 输出: 'Data fetched'
}

run();

4. 事件监听 🎉

在某些情况下，可以使用事件监听来处理异步操作。这种方式常用于浏览器中的DOM事件。

示例代码

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked');
});

5. 发布/订阅模式（Pub/Sub） 📢

这是一种设计模式，允许某个对象（发布者）发布事件，而其他对象（订阅者）可以订阅这些事件并做出响应。

示例代码（Node.js示例）

const EventEmitter = require('events'); // Node.js内置模块
const myEmitter = new EventEmitter();

myEmitter.on('fetchData', (data) => {
    console.log(data);
});

// 模拟异步操作
setTimeout(() => {
    myEmitter.emit('fetchData', 'Data fetched');
}, 2000);

6. Generator函数 🌀

Generator函数是ES6中引入的，可以暂停和恢复函数执行，也可以用于处理异步操作。

示例代码

function* generator() {
    const data = yield fetchData();
    console.log(data);
}

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 2000);
    });
}

const gen = generator();
gen.next().value.then(gen.next.bind(gen));