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