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 相关文章推荐
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JS实现div居中示例
Apr 17 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 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
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python实现自动登录
2018/09/17 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
日本无添加化妆品:HABA
2016/08/18 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
国际商贸专业自荐信
2014/06/09 职场文书
汽车维修求职信
2014/06/15 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
爱护公物演讲稿
2014/09/09 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python