标签JavaScript

Promise学习心得

  • 不知道Promise这个词是什么时候出现的,也有好一段时间接触它了,但是一直对它一知半解,应该是自己的知识未达到理解它的境界,才导致我怎么去看都看不懂的原因。呵呵……我又在乱找原因了!其实是一直都没有心思去认真学习它。今日感觉有些空闲,就特意查了一下相关资料,终于顿悟了这所谓的Promise到底是什么了!
    首先,得先引出学习最受益的文章链接:吕大豹
  • 下面就来总结一下自己对Promise的理解:
    javascript的异步操作,对于刚接触的人或者用得滚瓜烂熟的人,都会一不小心陷入它的回调陷阱中去。于是出现了各种把异步转化为同步的东西,如then.js,async.js等,而这个Promise,其实也相当于这些玩意,只不过是在ES6的规范中,成为了内置的对象了而已。那就好理解了,Promise的最大好处,就是能够处理javascript的异步操作。具体如下:
function test1() {
  var p = new Promise(function (resolve, reject) {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
      resolve(num);
    } else {
      reject('数字太大');
    }
  });
  return p;
}
test1().then(function (data) {
  console.log(data);
}).catch(function (data) {
  console.log(data);
});

以上就是一个完整的Promise的使用例子,多次运行,要么输出一个小于等于5的数字,要么输出“数字太大”这一串文字,也就是执行了Promise的resolve方法或者是reject方法,而对应的两个方法,在调用时候是分别进入到then或者catch当中去。这样,就可以轻松处理深层次回调带来的麻烦了。

如果是多个,则可以这样:

function test1(){
  var p = new Promise(function(resolve, reject) {
    var num = Math.ceil(Math.random()*10); //生成1-10的随机数
    if(num <= 5) {
      resolve('test1中的num='+ num);
    } else {
      reject('test1中数字太大');
    }
  });
  return p;
}

function test2() {
  var p = new Promise(function(resolve, reject) {
    var num = Math.ceil(Math.random()*10); //生成1-10的随机数
    if(num >= 5) {
      resolve('test2中的num='+ num);
    } else {
      reject('test2中数字太小');
    }
  });
  return p;
}

function test3() {
  var p = new Promise(function(resolve, reject) {
    var num = Math.ceil(Math.random()*10); //生成1-10的随机数
    if(num === 5) {
      resolve('test3中的num='+ num);
    } else {
      reject('test3中数字不等于5');
    }
  });
  return p;
}

test1().then(function(data) {
  console.log(data);
  return test2();
}).then(function(data) {
  console.log(data);
  return test3();
}).then(function(data) {
  console.log(data);
}).catch(function(data) {
  console.log(data);
});

输出的结果为:

test1中的num=5
test2中的num=6
test3中数字不等于5

当然,如果是test1或者test2就出现reject,则直接进入到catch中,而不会执行以下的代码了。
其中的奥秘,可以自行去体会了……


  • 还有一个有用的玩意,那就shi Promise的all方法,就是把一堆的方法以数组形式放到all当中,然后在then当中会得到方法数组中的结果数组,这样就可以统一处理结果集。其中的意思就是会执行耗时最长的那个方法的那个时间,也就是要等所有方法都执行完了,才会有结果集。也有一个相反的方法,就是race方法,语法相似,是依次得到执行得最快的结果。具体实现方法可以去看大豹的博客,其中的5秒后请求不到图片路径的使用场景值得参考。