当前位置：首页 > news >正文

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

news 2025/8/15 20:17:15

在这里插入图片描述

前言

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