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

zoe_ya

已于 2024-04-09 15:41:33 修改

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 开发语言 ecmascript

于 2024-03-22 20:19:36 首次发布

本文链接：https://blog.youkuaiyun.com/Constantiny/article/details/136950233

前端专栏收录该内容

29 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了JavaScript中的异步解决方案，包括回调函数、事件监听（发布订阅模式）和Promise。着重讲解了Promise的概念、状态转换以及如何通过then和catch处理异步结果。最后提到了Async/Await作为现代异步编程的新方法。

在这里插入图片描述

前言

为了解决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：