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

2025/3/18 12:18:52 来源：https://blog.csdn.net/everfoot/article/details/143367348 浏览: 次关键词：通过Promise和async/await解决异步操作 - 2024最新版前端秋招面试短期突击面试题

通过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));