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


Posted in Javascript onFebruary 19, 2019

前言

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

官网是 http://reactivex.io/

开源地址 https://github.com/ReactiveX/rxjs

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
基于node.js实现爬虫的讲解
Feb 18 #Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 #Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 #Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 #Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 #Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 #Javascript
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php 类自动载入的方法
2015/06/03 PHP
php上传大文件设置方法
2016/04/14 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python线程的两种编程方式
2015/04/14 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
专项法律服务方案
2014/06/11 职场文书
升国旗演讲稿
2014/09/05 职场文书
放弃继承权公证书
2015/01/23 职场文书
干部外出学习心得体会
2016/01/18 职场文书
2016年少先队活动总结
2016/04/06 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android