js异步编程的实现方式

回调函数（Callbacks）、事件监听（Event Listeners）、发布/订阅（Publish/Subscribe）模式、Promise对象、生成器函数 Generator/yield、async/await

1、回调函数（Callbacks）

这是异步操作最原始的用法。

缺点：是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。

function asyncOperation(callback) {
    // 假设这是一个异步操作
    setTimeout(function() {
        var result = "Data";
        callback(result);
    }, 1000);
}
 
asyncOperation(function(data) {
    console.log(data); // 输出: Data
});

2、事件监听（Event Listeners）

缺点：是整个程序都要变成事件驱动型，运动流程会变得很不清晰。

class EventEmitter { // 伪代码，需要实现事件监听机制
    addListener(event, listener) {
        // 添加监听器
    }
}
 
const emitter = new EventEmitter();
 
emitter.addListener('data', function(data) {
    console.log(data);
});
 
// 当数据准备好时，触发'data'事件
emitter.emit('data', "Data");

 3、发布/订阅（Publish/Subscribe）模式【观察者模式】

发布订阅基于事件监听，发布者和订阅者通过一个事件中心进行通信, 并且实现了多个事件解耦 

class PubSub { // 伪代码，需要实现发布/订阅机制
    subscribe(event, listener) {
        // 订阅事件
    }
    publish(event, data) {
        // 发布事件
    }
}
 
const pubsub = new PubSub();
 
pubsub.subscribe('data', function(data) {
    console.log(data);
});
 
// 发布'data'事件
pubsub.publish('data', "Data");

 4、Promise对象

为了解决回调地狱的问题，之后社区提出了 Promise 的解决方案，ES6 又将其写进了语言标准，采用 Promise 的实现方式在一定程度上解决了回调地狱的问题。

promise的优点在于回调函数变成了链式写法，程序流程看的很清楚，而且配套齐全，可以实现很强大的功能。

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            var result = "Data";
            resolve(result);
        }, 1000);
    });
}
 
asyncOperation().then(data => {
    console.log(data); // 输出: Data
});

5、生成器函数 Generator/yield

Generator 是ES6提出的一种新的异步编程的方案，通过 yield 关键字来控制代码的暂停，Generator 函数使用时跟普通函数几乎是一样的，其中有两个不同点，function关键字与函数名之间有一个星号 函数体内部使用yield语句，定义不同的内部状态。

  Generator函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象。

function* createGenerator() {// 步骤一
    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    yield 3;
    console.log(4);
}
// createGenerator 可以像正常函数一样被调用，但是并不会执行
let generatorItem = createGenerator();
console.log(generatorItem.next().value); // 1
console.log(generatorItem.next().value); // 2
console.log(generatorItem.next().value); // 3

6、async/await

async是“异步”的意思，而 await 是等待的意思。所以应该很好理解 async 用于申明一个 异步的function （实际上是asnyc function 对象）

await 用于等待一个异步任务执行完成的结果，并且await只等出现在 async 函数中

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data");
        }, 1000);
    });
}
 
async function main() {
    const data = await asyncOperation();
    console.log(data); // 输出: Data
}
 
main();

此文章引用了下面博主的优秀文章万分感谢！ 

原文链接：https://blog.csdn.net/weixin_48051526/article/details/134609175