有哪些网页设计软件,sem优化,万网怎么建设网站,有些网站仿出问题前言
为了解决Javascript 语言的执行环境是单线程所带来的问题#xff0c;Javascript 将任务的执行模式分为两种#xff1a;同步和异步
同步即为后一个任务等待前一个任务结束再继续执行#xff0c;程序的执行顺序与任务的排列顺序是一致的
异步则完全不同#xff0c;每…
前言
为了解决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
ES6ECMAScript 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
