<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. JS异步执行结果获取的3种解决方式

         更新时间:2019年02月19日 08:29:42   作者:朋也   我要评论

        这篇文章主要给大家介绍了关于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

        官网是 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));

        总结

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

        相关文章

        • JS判断页面是否出现滚动条的方法

          JS判断页面是否出现滚动条的方法

          这篇文章主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
          2015-07-07
        • 简单实现js拖拽效果

          简单实现js拖拽效果

          这篇文章主要教大家如何简单实现js拖拽效果,很详细的js拖拽效果实?#25191;?#30721;,具有一定的参?#25216;?#20540;,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
          2017-07-07
        • js实现Select头像选择实时预览代码

          js实现Select头像选择实时预览代码

          这篇文章主要介绍了js实现Select头像选择实时预览代码,涉及javascript动态遍历?#21543;?#32622;select选项的技巧,非常简单实用,需要的朋友可以参考下
          2015-08-08
        • 修复bash漏洞的shell脚本分享

          修复bash漏洞的shell脚本分享

          这篇文章主要介绍了修复bash漏洞的shell脚本分享,本文脚本适应常见的linux服务器系统,如CentOS、Debian、Ubuntu、OpenSuSE、Aliyun等系统,需要的朋友可以参考下
          2014-12-12
        • js滚?#36136;?#20214;兼容性问题需要注意哪些

          js滚?#36136;?#20214;兼容性问题需要注意哪些

          这篇文章主要为大家详细介绍了js滚?#36136;?#20214;需要注意的兼容性问题,具有一定的参?#25216;?#20540;,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
          2016-11-11
        • 用javascript实现给出的盒子的序列是否可连为一矩型

          用javascript实现给出的盒子的序列是否可连为一矩型

          用javascript实现给出的盒子的序列是否可连为一矩型...
          2007-08-08
        • javascript简写效果?#21543;?#31192;的眼睛”

          javascript简写效果?#21543;?#31192;的眼睛”

          ?#25226;?#30555;跟随鼠标转动效果”—— 265.com 把它放在网页的LOGO里,用javascript来实现,这个创意不错! 以前刚做FLASH的时候,用AS1实现过,今天下班早,在家简写了个:
          2008-02-02
        • 10行代码实现微信小程序滑动tab切换

          10行代码实现微信小程序滑动tab切换

          这篇文章主要为大家详细介绍了10行代码实现微信小程序滑动tab切换效果,具有一定的参?#25216;?#20540;,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
          2018-12-12
        • ?#31243;竕avascript的闭包

          ?#31243;竕avascript的闭包

          本文介绍了javascript闭包的相关知识。具有很好的参?#25216;?#20540;,下面跟?#21028;?#32534;一起来看下吧
          2017-01-01
        • javascript创建动态表单的方法

          javascript创建动态表单的方法

          这篇文章主要介绍了javascript创建动态表单的方法,实例分析了javascript动态操作页面表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
          2015-07-07

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>