Promise处理JS异步的问题

promise是一款轻量级的JS插件,我们可以利用它来处理JS中的一些异步的问题。我们可以去github上面下载最新的源码。链接地址:https://github.com/stackp/promisejs 。

注:咱们做前端或移动hybrid开发的,首先电脑上应该要装有node.一些调试的类对我们还是会有帮助的,比如console类。
首先我们来看一个简单的例子:
按顺序输出一些句子,之前的写法是这样子的:

function fn1(){
   console.info("this is 1") ;
}
function fn2(){
   console.info("this is 2");
}
function fn3(){
   console.info("this is 3") ;
}
//按照顺序调用
fn1() ;
fn2() ;
fn3() ;
//输出的结果:
//this is 1 
//this is 2
//this is 3

其实这样这做并不能保证fn1、fn2、fn3按照顺序的去执行的。大家都知道,javascritp是单线程执行的,假如fn2的方法里面涉及到了其他的回调函数,有可能程序在执行到fn2的时候会被挂起,而先去执行fn3。那么这样就不能按照我么期望的那样按照顺序去输出了。

现在我们是使用promise去帮我们解决这个问题:


<html>
    <head>
      <title>Promise Testtitle>
      <meta http-equiv="ContentType" content="text/html" charset="utf-8">
    head>
    <body>
    boy>
    <script type="text/javascript" src="promise.js">script>
    <script type="text/javascript">
       function fn1(){
          var p = new promise.Promise() ;
          setTimeout(function(){
            console.info("this is 1") ;
            p.done() ;
          },2000);    
          return p ;  
       }
       function fn2(){
           var p = new promise.Promise() ;
           console.info("this is 2") ;  
           p.done() ;
           return p ; 
         }
       function fn3(){
          var p = new promise.Promise() ;
          console.info("this is 3") ;
          p.done() ;
          return p ;
       }  
      fn1().then(fn2).then(fn3) ;
      //输出的结果是:
      //this is 1 
      //this is 2
      //this is 3   
    script>    
htlm>

前面也说过,javascript是单线程的,fn1中使用setTimeout的方法,fn1中的代码应该是延迟2秒钟后才去执行的。按理来说是程序会先把setTimeout中的代码挂起的,然后去执行fn2中的代码,但是输出的结果并不是样子的,还是按照fn1->fn2->fn3的顺序去执行的。这就是promise来处理的。
我们可以换下顺序调用 :fn3().then(fn1).then(fn3) ;
输出的结果:

//this is 3
//this is 1
//this is 2

代码解析:
要想了解为什么有这样的结果,咱们还是直接看一下源码:

function Promise() {
        this._callbacks = [];
    }

    Promise.prototype.then = function(func, context) {
        var p;
        if (this._isdone) {
            p = func.apply(context, this.result);
        } else {
            p = new Promise();
            this._callbacks.push(function () {
                var res = func.apply(context, arguments);
                if (res && typeof res.then === 'function')
                    res.then(p.done, p);
            });
        }
        return p;
    };

    Promise.prototype.done = function() {
        this.result = arguments;
        this._isdone = true;
        for (var i = 0; i < this._callbacks.length; i++) {
            this._callbacks[i].apply(null, arguments);
        }
        this._callbacks = [];
    };

fn1().then(fn2).then(fn3) ; 毋庸置疑,该调用方式是从左往右调用的。首先咱们看下fn1执行的代码 :
setTimeout的里面的代码是验证2秒执行的,但是还是会执行 return p ;这句代码,接着调用then(fn2),我们看下源码中的then的方法:因为fn1此时还没有执行done()的方法,所以会_isdone是为”undefined”的,所以此时会执行else{ }里面的语句。下班了,该内容待续~

你可能感兴趣的:(Promise处理JS异步的问题)