js原生实现异步
原生JavaScript实现异步的方法
回调函数(Callback)
回调函数是最基础的异步实现方式,通过将函数作为参数传递给另一个函数,在异步操作完成后调用该回调函数。
function fetchData(callback) {
setTimeout(() => {
const data = 'Async data';
callback(data);
}, 1000);
}
fetchData((data) => {
console.log(data); // 输出: Async data
});
Promise
Promise是ES6引入的异步解决方案,提供了更清晰的链式调用和错误处理机制。

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'Async data';
resolve(data);
}, 1000);
});
}
fetchData()
.then(data => console.log(data)) // 输出: Async data
.catch(error => console.error(error));
async/await
async/await是ES7引入的语法糖,基于Promise实现,使异步代码看起来像同步代码。

function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
const data = 'Async data';
resolve(data);
}, 1000);
});
}
async function getData() {
try {
const data = await fetchData();
console.log(data); // 输出: Async data
} catch (error) {
console.error(error);
}
}
getData();
事件监听(EventEmitter)
通过自定义事件监听机制实现异步,适合需要多次触发异步操作的场景。
class EventEmitter {
constructor() {
this.events = {};
}
on(event, listener) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(listener);
}
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(listener => listener(...args));
}
}
}
const emitter = new EventEmitter();
emitter.on('data', (data) => console.log(data)); // 输出: Async data
setTimeout(() => emitter.emit('data', 'Async data'), 1000);
Generator函数
Generator函数是ES6引入的另一种异步解决方案,通过yield暂停函数执行。
function* fetchData() {
yield new Promise(resolve => {
setTimeout(() => resolve('Async data'), 1000);
});
}
const generator = fetchData();
generator.next().value.then(data => console.log(data)); // 输出: Async data
选择建议
- 简单异步任务可使用回调函数或Promise。
- 复杂异步逻辑推荐使用async/await,代码更易读。
- 需要事件驱动的场景适合事件监听机制。
- Generator函数通常与库(如co)配合使用,原生场景较少直接使用。






