「JS 基础」异步解决方案入门

前言

为了解决Javascript 语言的执行环境是单线程所带来的问题，Javascript 将任务的执行模式分为两种：同步和异步

同步即为后一个任务等待前一个任务结束再继续执行，程序的执行顺序与任务的排列顺序是一致的

异步则完全不同，每一个任务都有一个或者多个回调函数，前一个任务结束后，不是执行后一个任务而是执行回调函数，后一个任务则是不等待前一个任务执行结束就执行。因此，程序的执行顺序与任务的排列是不一致的、异步的。在浏览器端，耗时很长的操作都应该异步执行，从而避免浏览器失去响应。在服务端，异步模式甚至是唯一的模式，因为执行环境是单线程的，如果同步执行所有的 http 请求，服务器的性能会急剧下降。

异步解决方案

回调函数 callback

回调函数，简单来说就是一个函数作为参数传递给另一个函数
回调并不一定就是异步，并没有直接关系，只不过回调函数是异步的一种解决方案

// 同步
function fn1(callback){
  console.log("1")
  callback && callback()
}

function fn2(){
  console.log("2")
}

fn1(fn2)

// 异步
function fn1(callback){
	setTimeout(() => {
		callback && callback()
	}, 1000)
}

function fn2(){
  console.log("2")
}

fn1(fn2)

缺点：

• 代码不优雅
• 不易阅读维护
• 高耦合，层层嵌套造成这种回调地狱
• 异步回调中，回调函数的执行栈与原函数分离开，外部无法抓住异常，异常会变得不可控

事件监听（发布订阅模式）

class EventEmitter {
  constructor() {
    this.events = {};
  }

  // 订阅指定的事件
  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  // 取消订阅指定的事件
  off(event, listenerToRemove) {
    if (!this.events[event]) {
      return;
    }
    this.events[event] = this.events[event].filter(listener => listener !== listenerToRemove);
  }

  // 触发指定的事件，并传递数据给事件监听器
  emit(event, ...args) {
    if (!this.events[event]) {
      return;
    }
    this.events[event].forEach(listener => {
      listener.apply(this, args);
    });
  }
}

// 使用 EventEmitter 的例子

// 创建一个事件发射器的实例
const eventEmitter = new EventEmitter();

// 创建监听事件
const onMessage = (message) => {
  console.log(`Received message: ${message}`);
};

// 将监听器绑定到事件 'message'
eventEmitter.on('message', onMessage);

// 触发事件 'message'，并传递数据
eventEmitter.emit('message', 'Hello World!'); // 输出: Received message: Hello World!

// 取消订阅
eventEmitter.off('message', onMessage);

// 再次触发事件 'message'，此时没有监听器监听这个事件，因此不会有输出
eventEmitter.emit('message', 'Hello again!');

Promise

ES6（ECMAScript 2015）引入了Promise，它是一种对异步操作进行管理的机制。Promise 代表一个尚未完成但预期将来会完成的异步操作的结果。它可以解决传统的回调地狱问题，提供更加优雅的异步代码管理方式，具备以下特点：

状态不可逆：Promise有三种状态：pending（进行中），fulfilled（已成功）和rejected（已失败）。状态改变只能从 pending 到 fulfilled 或从 pending 到 rejected，状态一旦改变，就不会再变。

异步结果的占位符：Promise 起到一个代理的作用，允许你在异步操作未完成时安排代码以响应式的成功（fulfilled）或失败（rejected）。

示例和基本用法：

// 创建一个新的 Promise 对象
let promise = new Promise(function(resolve, reject) {
  // 异步操作
  setTimeout(() => {
    // 成功的异步操作
    resolve('Data received');
    
    // 或者一个失败的异步操作
    // reject(new Error('Failed to receive data'));
  }, 1000);
});

// 使用 then 方法设置当 promise 状态变为 fulfilled 时应该执行的代码
promise.then(function(value) {
  console.log(value);
}, function(error) {
  console.error(error);
});

// 使用 catch 方法来捕获异常
promise.catch(function(error) {
  console.error('There was an error', error);
});

Promise的方法：

• then(onFulfilled, onRejected)：then方法返回一个新的 Promise。它接受两个函数作为参数。第一个函数在Promise成功时调用，并接受成功的值作为参数。第二个函数在Promise失败时调用，并接受错误或拒绝的理由作为参数。
• catch(onRejected)：捕获 Promise 中发生的任何异常，等同于.then(null, onRejected)。
• finally(onFinally)：无论 Promise 最终的状态如何，都会执行onFinally回调，而且不接收任何参数。它通常用于清理操作，比如停止加载指示器。

此外，Promise API 还提供了几个静态方法用于处理多个Promise：

• Promise.all(iterable)：接受一个 Promise 对象的集合作为输入，当这些对象全部成功时才触发成功。
• Promise.race(iterable)：同样接受一个集合，但只要其中的一个 Promise 对象改变状态，返回的 promise 对象就会随之改变状态。
• Promise.resolve(value)：返回一个以给定值解析后的 Promise 对象。
• Promise.reject(reason)：返回一个以给定理由拒绝的 Promise 对象。

Promise 提高了异步代码的可读性和可维护性，并且是许多现代JavaScript异步编程的基石。

Async/Await

TODO

Async/Await = Generator + Promise