JS异步执行结果获取的3种解决方式

前⾔

JS异步执⾏机制具有⾮常重要的地位，尤其体现在回调函数和事件等⽅⾯。

但异步有时候很⽅便，有时候却很让⼈恼⽕，下⾯来总结⼀下异步执⾏结果获取的⽅法回调

这是最传统的⽅法了，也是最简单的，如下代码

function foo(cb) {

setTimeout(function() {

cb(1); // 通过参数把结果返回 }, 2000);}

foo(function(result) { // 调⽤foo⽅法的时候，通过回调把⽅法返回的数据取出来 console.log(result);})

Promise

Promise是ES6⾥加⼊的新对象，它可以把⼀个异步执⾏的⽅法封装成⽀持同步操作的⽅法，结合 async/await 完美，下⾯说⼀下它是怎么封装⼀个⽅法的

function foo() {

return new Promise((resolve, reject) => { setTimeout(function() {

resolve(1); // 通过 resolve 参数把成功的结果返回 // reject('error'); // 通过 reject 参数把错误信息返回 }, 2000); })}

// 调⽤foo()

.then(result => console.log(result)) .catch(error => console.log(error));

从上⾯例⼦可以看出，Promise取值使⽤的是 .then() 函数，异常处理⽤的是 .catch() 函数rxjs

rxjs 是⼀种设计思想的javascript语⾔的实现框架，rx原名是：ReactiveX

rx⼝号是万物皆是流，跟java⾥万物皆对象挺像的，它的api也全都是对流进⾏操作，写起来还是很爽的，下⾯看⼀下rxjs怎么封装⼀个异步执⾏操作

注意，⽤这货⾸先要安装它在⾃⼰的项⽬⾥，然后再引⼊依赖，如果是浏览器环境可以引⼊js

import { Observable } from 'rxjs';

function foo() {

return new Observable((observe) => { setTimeout(function() {

observe.next(1); // 通过 observe.next() ⽅法把成功的结果返回 // observe.error('error'); // 通过 observe.error ⽅法把错误信息返回 }, 2000); })}

// 调⽤foo()

.subscribe(

result => console.log(result), error => console.log(error) );

可以看到它跟Promise很像，就是变了⼏个参数名，不过它可⽐Promise强⼤多了

下⾯来说⼀下rxjs⾥的取消操作，没错请求还能取消，这骚操作也只有rxjs能实现了

import { Observable } from 'rxjs';

function foo() {

return new Observable((observe) => { setTimeout(function() {

observe.next(1); // 通过 observe.next() ⽅法把成功的结果返回 // observe.error('error'); // 通过 observe.error ⽅法把错误信息返回 }, 2000); })}

// 调⽤，⽅法⾥2s后返回数据const o = foo().subscribe( result => console.log(result), error => console.log(error));

// 设置⼀个定时器1s后取消订阅，这样console⾥就不会打印出结果了，这个请求也就被取消了setTimeout(function() {

o.unsubscribe(); // 取消订阅}, 1000);

rxjs除了取消执⾏外，还有⼀个⽜逼的功能，循环执⾏，对⼀个请求可以⼀直接收它返回的结果，看下下⾯的例⼦就明⽩了

import { Observable } from 'rxjs';

function foo() {

return new Observable((observe) => { let count = 0;

setInterval(function() {

observe.next(count++); // 通过 observe.next() ⽅法把成功的结果返回 // observe.error('error'); // 通过 observe.error ⽅法把错误信息返回 }, 1000); })}

// 调⽤

foo().subscribe(

result => console.log(result), // 这⾏会每隔1s打印⼀条数据 error => console.log(error));

因为在 ReactiveX ⾥⼀切皆是流，所以也就有很多对流操作的api，⽐如 fliter, map 等，类似于java8⾥的 stream 的操作，下⾯看⼀下例⼦说明⽩了

import { Observable } from 'rxjs';// 对流操作要引⼊操作类

import { map, filter } from 'rxjs/operators';

function foo() {

return new Observable((observe) => { let count = 0;

setInterval(function() {

observe.next(count++); // 通过 observe.next() ⽅法把成功的结果返回 // observe.error('error'); // 通过 observe.error ⽅法把错误信息返回 }, 1000); })}

// 调⽤

const o = foo();o.pipe(

filter((value: number) => value % 2 === 0), map((value: number) => value *= 2)).subscribe(data => console.log(data));

总结

以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。