浅谈JavaScript中的异步处理
整理于互联网
- 在
JavaScript的世界中,所有代码都是单线程执行的- 由于这个“缺陷”,导致
JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现- 异步操作会在将来的某个时间点触发一个函数调用
- 主流的异步处理方案主要有:回调函数
(CallBack)、Promise、Generator函数、async/await。
# 一、回调函数(CallBack)
- 这是异步编程最基本的方法
- 假设我们有一个
getData方法,用于异步获取数据,第一个参数为请求的url地址,第二个参数是回调函数,如下:
function getData (url, callBack) {
// 模拟发送网络请求
setTimeout(() => {
// 假设 res 就是返回的数据
var res = {
url: url,
data: Math.random()
}
// 执行回调,将数据作为参数传递
callBack(res)
}, 1000)
}
@前端进阶之旅: 代码已经复制到剪贴板
- 我们预先设定一个场景,假设我们要请求三次服务器,每一次的请求依赖上一次请求的结果,如下:
getData('/page/1?param=123', (res1) => {
console.log(res1)
getData(`/page/2?param=${res1.data}`, (res2) => {
console.log(res2)
getData(`/page/3?param=${res2.data}`, (res3) => {
console.log(res3)
})
})
})
@前端进阶之旅: 代码已经复制到剪贴板
-
通过上面的代码可以看出,第一次请求的
url地址为:/page/1?param=123,返回结果为res1。 -
第二个请求的
url地址为:/page/2?param=${res1.data},依赖第一次请求的res1.data,返回结果为res2`。 -
第三次请求的
url地址为:/page/3?param=${res2.data},依赖第二次请求的res2.data,返回结果为res3。 -
由于后续请求依赖前一个请求的结果,所以我们只能把下一次请求写到上一次请求的回调函数内部,这样就形成了常说的:回调地狱。
# 二、发布/订阅
我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(
publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)