JS异步执行结果获取：回调、Promise和RxJS详解

JavaScript异步执行机制概述

前言

JavaScript的异步执行机制在开发中占据核心地位，尤其在处理回调函数和事件监听时表现突出。

尽管异步编程能带来便利，但在处理结果获取时往往令人困扰。本文将总结几种获取异步执行结果的有效方法。

传统回调函数方式

回调

这是最基础且简单的实现方式，具体代码示例如下。


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

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

使用Promise处理异步

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

RxJS是JavaScript语言对响应式编程思想（ReactiveX）的具体实现框架。

其官方网站地址为 http://reactivex.io/。

开源项目托管于 https://github.com/ReactiveX/rxjs。

RxJS的口号是“万物皆是流”，这与Java中“万物皆对象”的理念相似。其API主要围绕对流的操作展开，编写体验较为流畅。下面展示RxJS如何封装一个异步执行操作。

使用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)
 );

可以看出，RxJS的使用方式与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，例如filter和map，类似于Java 8中的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));

总结

以上就是本文的全部内容，希望这些内容对您的学习或工作具有参考价值。如有疑问，欢迎留言交流，感谢支持。

JavaScript异步结果获取的三种方式：回调、Promise与RxJS

JavaScript异步执行机制概述

传统回调函数方式

使用Promise处理异步

RxJS响应式编程框架

实用工具推荐