zoukankan      html  css  js  c++  java
  • es6 Promise 异步函数调用

      开发很多的时候需要异步操作,常用的做法就是用回调函数,假如需要一连串的调用,并且后面一个调用依赖前一个返回的结果的时候,就得多层嵌套回调函数,比如下面这种情况:

    $('.animateEle').animate({
        opacity:'.5'
    }, 4000,function(){  //回调
        $('.animateEle2').animate({
            '100px'
        },2000,function(){  //回调
            $('.animateEle3').animate({
                height:'0'
            },1000,function(){
                .......太乱
           });
        });
    });

      回调函数嵌入太多了,看晕了都,代码很不美观,于是es6加入了新特性解决这个问题,Promise.

      Promise最大的好处就是可以链式的调用函数,起到异步回调函数的作用,看起来更加直观简洁,

      resolve 和 reject

      这是Promis最重要的两个方法,resolve方法可以让Promise对象的状态变为成功,reject是失败,举个例子一目了然:

            function print (ready) {
                return new Promise ((resolve, reject)=>{
                    if(ready){
                        resolve("Hello World!");
                    }else{
                        reject("Good bye!");
                    }
                })
            }
    
            print(true).then(message=>{
                alert(message);
            },error=>{
                alert(error);
            }
            );

      then

      Promise通常配合then方法来链式的使用,then方法里面第一个回调函数表示成功状态,也就是resolve,第二个是失败状态-reject,如果默认写一个参数的话,默认resolve

      代码会输出 Hello World!

      一个看不出来,多几个依赖状态就看着明显了:

            function Print (ready) {
                return new Promise ((resolve,reject)=>{
                    if(ready){
                        resolve("Hello World!");
                    }else{
                        reject("Good bye!");
                    }
                });
            }
            function print1 () {
                alert("World");
            }
            function print2 () {
                alert("!");
            }
            Print(true)
                .then(message=>{alert(message);})
                .then(print1)
                .then(print2)

      上面的代码依次等到上一个Promise对象返回成功后依次调用,否则按照老式的写法还得包进回调函数里,包好几层就很不方便容易看晕,这样链式的调用取代老式写法,这是Promise最常用的。

      catch:

      当返回发生错误的时候,会触发catch,可以写成then(fn).catch(fn),相当于 then(fn).then(null, fn);

            function Print (ready) {
                return new Promise ((resolve,reject)=>{
                    if(ready){
                        resolve("Hello World!");
                    }else{
                        reject("Good bye!");
                    }
                });
            }
            function print1 () {
                alert("World");
            }
            function print2 () {
                alert("!");
            }
        function catch_error () {
          alert('error');
        }
            Print(false)
                .then(message=>{alert(message);})
                .then(print1)
                .then(print2)
            .catch(catch_error)

      失败的状态其实可以写进then的第二个参数里,但是一般不用那么些,用catch捕获更符合promise的初衷

      all: 

      Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回

    var p1 = new Promise(resolve=>{
      setTimeout(()=>{
        resolve("Hello");
      },3000);
    });
    
    var p2 = new Promise(resolve=>{
      setTimeout(()=>{
        resolve("World");
      },1000);
    });
    
    Promise.all([p1, p2]).then(result=>{
      console.log(result);
    });

      还有一个和 Promise.all 相类似的方法 Promise.race,它同样接收一个数组,不同的是只要该数组中的 Promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回。

      es6的Promise还有一些方法,就不写了,以上是常用的.

      es7里还有async函数,也起到异步作用,就不多说了先.

      兼容性不是很好,vue开发的时候常常会用babel转码,要么使用jquery的Deferred对象,用法跟Promise差不多。

  • 相关阅读:
    学习minix 3(未完成)
    排序
    分析nat穿越(未完成)
    固定增量感知器
    分析7zip(未完成)
    分析easyVM 未完成)
    分析wrk,crk
    分析vczh的东东(未完成)
    标 题: 三维游戏里面的自动寻路的算法可能是什么样的?
    几个googlecode
  • 原文地址:https://www.cnblogs.com/vvic/p/6652836.html
Copyright © 2011-2022 走看看