关于javascript:Js-异步处理演进CallbackPromiseObserver

5次阅读

共计 4782 个字符，预计需要花费 12 分钟才能阅读完成。

异步调用就像是接水管，互相缠绕的管道越多，就越容易漏水。如何将水管奇妙连通，使整个零碎有足够的弹性，须要去认真思考 🤔

对于 JavaScript 异步的了解，不少人感到过困惑：Js 是单线程的，如何做到异步的呢？实际上，Js 引擎通过混用 2 种内存数据结构：栈和队列，来实现的。栈与队列的交互也就是大家所熟知的 Js 事件循环~~

举个栗子🌰

function fooB(){

console.log('fooB: called');

}

function fooA(){

fooB();
console.log('fooA: called');

}

fooA();
// -> fooB: called
// -> fooA: called
复制代码
Js 引擎解析如下：

push fooA to stack
<stack>
|fooA| <- push
push fooB to stack
<stack>
|fooB| <- push
|fooA|
pop fooB from stack and execute
<stack>
|fooB| <- pop
|fooA|

// -> fooB: called
<stack>
|fooA|

pop fooA from stack and execute
<stack>
|fooA| <- pop

// -> fooA: called

<stack>
| | <- stack is empty
复制代码
从以上代码能够看出，fooA、fooB 两个同步函数都被压入栈中，那么什么样的函数会被放入队列中呢？

当然就是蕴含异步操作的函数了：

setTimeout
setInterval
promise
ajax
DOM events
举个栗子🌰

function fooB(){

setTimeout(()=>console.log('API call B'));
console.log('fooB: called');

}

function fooA(){

setTimeout(()=>console.log('API call A'));
fooB();
console.log('fooA: called');

}

fooA();
// -> fooB: called
// -> fooA: called
// -> API call A
// -> API call B
复制代码
Js 引擎解析如下：

push fooA to stack
<stack>
|fooA| <- push
push ‘API call A’ to queue

<queue>|’API call A’| <- push

push fooB to stack
<stack>
|fooB| <- push
|fooA|
push ‘API call B’ to queue

<queue>|’API call A’|’API call B’| <- push

pop fooB from stack and execute
<stack>
|fooB| <- pop
|fooA|

// -> fooB: called

<stack>
|fooA|

pop fooA from stack and execute
<stack>
|fooA| <- pop

// -> fooA: called

<stack> <- stack is empty
| |

pop ‘API call A’ from queue and execute

<queue>|’API call A’| <- pop |’API call B’|

// -> API call A

<queue>|’API call B’|

pop ‘API call B’ from queue and execute

<queue>|’API call B’| <- pop

// -> API call B

<queue>| | <- queue is empty
复制代码
gif 动图释义如下：

通过简略的回顾 Js 内存中栈和队列是如何交互后（没有细说微工作、宏工作），再看目前咱们是如何去组织这种交互的~

没错，就是以下 3 种组织形式，也是本篇外围重点：

Callback
Promise
Observer
Callback=>Promise=>Observer，后一个都是基于前一个的演进~

Callback
怎么了解 Callback？以打电话给客服为例，有两种抉择：

排队期待客服接听；
抉择客服有空时回电给你。
第 2 种抉择就是 JavaScript Callback 回调模式，在期待客服回复的同时，能够做其它事件，一旦客服有空，会被动回电给你~

function success(res){

console.log("API call successful");

}

function fail(err){

console.log("API call failed");

}

function callApiFoo(success, fail){

fetch(url)
  .then(res => success(res))
  .catch(err => fail(err));

};

callApiFoo(success, fail);
复制代码
Callback 毛病是：嵌套调用会造成回调天堂，如下；

callApiFooA((resA)=>{

callApiFooB((resB)=>{callApiFooC((resC)=>{console.log(resC);
    }), fail);
}), fail);

}), fail);
复制代码
Promise
家喻户晓，Promise 就是来解决回调天堂的~

function callApiFooA(){

return fetch(url); // JS fetch method returns a Promise

}

function callApiFooB(resA){

return fetch(url+'/'+resA.id);

}

function callApiFooC(resB){

return fetch(url+'/'+resB.id);

}

callApiFooA()

.then(callApiFooB)
.then(callApiFooC)
.catch(fail)

复制代码
与此同时，Promise 还提供了很多其它更具扩展性的解决方案，比方 Promise.all、Promise.race 等；

// Promise.all：并发执行，全副变为 resolve 或有 reject 状态呈现的时候，它才会去调用 .then 办法；

function callApiFooA(){

return fetch(urlA);

}

function callApiFooB(){

return fetch(urlB);

}

function callApiFooC([resA, resB]){

return fetch(url+'/'+resA.id+'/'+resB.id);

}

function callApiFooD(resC){

return fetch(url+'/'+resC.id);

}

Promise.all([callApiFooA(), callApiFooB()])

.then(callApiFooC)
.then(callApiFooD)
.catch(fail)

复制代码
Promise 让代码看起来更简洁，然而演进还没完结；如果想解决简单的数据流，用 Promise 将会很麻烦 ……

Observer
解决多个异步操作数据流是很简单的，尤其是当它们之间相互依赖时，咱们必须以更奇妙的形式将它们组合；Observer 退场！

observer 创立（公布）需更改的数据流，subscribe 调用（订阅生产）数据流；以 RxJs 举例：

function callApiFooA(){

return fetch(urlA);

}

function callApiFooB(){

return fetch(urlB);

}

function callApiFooC([resAId, resBId] ){

return fetch(url +'/'+ resAId +'/'+ resBId);

}

function callApiFooD(resC){

return fetch(url +'/'+ resC.id);

}

Observable.from(Promise.all([callApiFooA() , callApiFooB()])).pipe(

map(([resA, resB]) => ([resA.id, resB.id])), // <- extract ids
switchMap((resIds) => Observable.from(callApiFooC( resIds) )),
switchMap((resC) => Observable.from(callApiFooD( resC) )),
tap((resD) => console.log(resD))

).subscribe();
复制代码
具体过程：

Observable.from 将一个 Promises 数组转换为 Observable，它是基于 callApiFooA 和 callApiFooB 的后果数组；

map — 从 API 函数 A 和 B 的 Respond 中提取 ID；

switchMap — 应用前一个后果的 id 调用 callApiFooC，并返回一个新的 Observable，新 Observable 是 callApiFooC(resIds) 的返回后果；

switchMap — 应用函数 callApiFooC 的后果调用 callApiFooD；

tap — 获取先前执行的后果，并将其打印在控制台中；

subscribe — 开始监听 observable；

Observable 是多数据值的生产者，它在解决异步数据流方面更加弱小和灵便，它在 Angular 等前端框架中被应用~~

敲！这写法，这模式不就是函数式编程中的函子吗？Observable 就是被封装后的函子，一直传递上来，造成链条，最初调用 subscribe 执行，也就是惰性求值，到最初一步才执行、生产！

这样做有何益处？

外围起因就是拆散创立（公布）和调用（订阅生产）！

再举个栗子 🌰

var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {

observer.next(4);
observer.complete();

}, 1000);
});

console.log(‘just before subscribe’);
observable.subscribe({
next: x => console.log(‘got value ‘ + x),
error: err => console.error(‘something wrong occurred: ‘ + err),
complete: () => console.log(‘done’),
});
console.log(‘just after subscribe’);
复制代码
observable 公布（同步地）1，2，3 三个值；1 秒之后，持续公布 4 这个值，最初完结；

subscribe 订阅，调用执行；subscription.unsubscribe() 能够在过程中中止执行；

控制台打印后果：

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done
复制代码
小感：Js 异步解决演进分为 3 个阶段：Callback=>Promise=>Observer，重点了解也就是 Observer，Observer 就像是函数编程的函子，封装、传递链、提早执行，简直一摸一样，不过它更加强调公布和订阅的思维！宰割函数的创立和执行为两个独立的域，对于弹性组装异步水管至关重要！！

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKe… 不胜感激！

正文完