Promise在Javascript中早就已经实现,在ECMAScript6中正式加入到标准。那么Promise到底是干什么的?怎么用?

  一、Promise介绍

  Promise是一个对象,用来传递异步操作的消息,它有三种状态,pending(进行中)、resolved(成功)、rejected(失败)。

  二、Promise基本用法

  var promise = new Promise(function(resolve,reject){
    if(/*成功*/) resolve(value);

    else reject(error)
  })

  promise.then(function(value){

  console.log(value)

  },function(error){

  console.log(error);

  })

  上面代码中,在初始化Promise时,Promise构造函数接收一个函数作为参数。这个函数又有两个参数resolve和reject,从红色代码部分可以看出这个歌参数也是函数,但是不同于其他参数,resolve和reject这两个函数是内置的,由javascript引擎提供。resolve的作用是将状态从pending改变为resolved,reject是将状态改为rejected。

  再看then方法,这个方法接收两个函数作为参数,在上面的代码中分别是绿色部分和黄色部分。第一个函数也就是绿色部分是指定将状态改变为resolved时的回调函数,也就是说在上述代码中如果resolve(value)这个句执行,就会触发绿色部分的回调。执行reject则会触发黄色部分函数的回调。

  三、异常捕获

  Promise中是如何捕获异常的呢?看下面的代码。

  var promise = new Promise(function(resolve,reject){

    throw new Error('error');

  })

  promise.then(function(value){

  console.log(value)

  },function(error){

  console.log(error+' reject');

}).catch(function(error){

  console.log(error+' catch');

})

上述代码执行出得效果是error reject,为什么不是error catch呢?其实这样的,reject的回调函数不仅能作为将promise状态改变为rejected,而且还能处理上一步抛出异常时的情况。那么既然这样catch也有什么存在的意义呢?首先reject的回调不一定都会定义,其次catch可以捕获整个流程中所有环节抛出的异常,而reject只能处理上一步发生的异常。把上面代码改造一下,看得会更清楚。

 var promise = new Promise(function(resolve,reject){

    throw new Error('error');

  })

  promise.then(function(value){

  console.log(value)

  },function(error){

  console.log(error+' reject');

  throw new Error('error1');  

})

.then(function(value){

  console.log(value);

})

.catch(function(error){

  console.log(error+' catch');

  })

执行上述代码,可以看出红色部分的异常被catch部分捕获到了,是因为黄色部分的没有定义reject的回调,所以红色部分的异常一直冒泡到最后。

四、Promise.all()

Promise.all()是将多个promise实例,包装成一个新的promise实例。

var promiseAll = function(name){
  return new Promise(function(resolve,reject){
    resolve('my name is '+name);
  })
}

var promise1 = promiseAll('111'),
promise2 = promiseAll('222'),
promise3 = promiseAll('333');
var p = Promise.all([promise1,promise2,promise3]);
p.then(function(data){
  console.log(data)
})

.catch(function(e){
  console.log(e)
})

上面代码中promiseAll是一个返回一个Promise对象的函数,Promise1,promise2,promise3都是通过promiseAll得到一个Promise对象。p是通过Promise.all()方法生成的一个新的实例。最后的结果是["my name is 111", "my name is 222", "my name is 333"],也就将所有包装的Promise对象返回的结果包装成一个数组。值得注意的是Promise.all()这个方法传入的参数也是一个数组,否则会报错。另外p所包装的Promise对象中只要有一个失败,p的状态就是失败。

五、Promise.race()

Promise.race()同样是将多个Promise对象包装成一个新的Promise对象

var p = Promise.race([promise1,promise2,promise3]);

新的Promise对象p的装态是根据所包装的对象promise1,promise2,promise3中状态最先改变的Promise对象确定的,那个率先改变的Promise对象的值就传给p的回调函数。

上面是简单介绍了promise,那个意义主要是解决回调的多层嵌套,是代码更加的清晰。

更多promise内容请移步http://es6.ruanyifeng.com/#docs/promise

ECMAScript6 Promise的更多相关文章

  1. ECMAScript6的Promise对象

    1. 概念 Promise对象用于异步(asynchronouss)计算,一个Promise对象代表着一个还未完成,但预期完成的操作. 2. 出现原因: 1)  如果你需要通过ajax发送多次请求,而 ...

  2. ECMAScript6——异步操作之Promise

    Promise对象的参数为一个回调函数,这个回调函数有两个参数,分别是resolve, reject(这俩参数的名字可任取),resolve,reject分别表示异步操作执行成功后的回调函数和异步操作 ...

  3. 浅尝ECMAScript6

    浅尝ECMAScript6 简介 ECMAScript6 是最新的ECMAScript标准,于2015年6月正式推出(所以也称为ECMAScript 2015),相比于2009年推出的es5, es6 ...

  4. JavaScript中 Promise的学习以及使用

    今天一个哥们发过来一段js代码,没看懂,就顺便学习了一下,代码如下  Promise.resolve('zhangkai').then(value => {console.log(value)} ...

  5. 简单理解ECMAScript2015中的Promise

    ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作).使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回 ...

  6. 关于promise对象的笔记

    1.promise对象是ECMAScript6的新特性,很多新的JS框架都有它的实现和应用 2.promise常用于异步调用(ajax)中 3.promise主要用于解决回调函数层层嵌套的写法 4.要 ...

  7. ECMAScript6标准新增加的内容

    首选呐,你得了解一下javascript和ECMAScript的关系: 编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化.ECMAS ...

  8. promise异步编程的原理

    一.起源 JavaScript中的异步由来已久,不论是定时函数,事件处理函数还是ajax异步加载都是异步编程的一种形式,我们现在以nodejs中异步读取文件为例来编写一个传统意义的异步函数: var ...

  9. Promise小书(长文)

    promise基础 Promise是异步编程的一种解决方案.ES6 Promise的规范来源于Promises/A+社区,它有很多版本的实现. Promise比传统的解决方案(回调函数和事件)更合理和 ...

随机推荐

  1. java两个数组内存图

  2. webpack 模块热替换的理解和使用

    模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...

  3. MyBatis注解开发-@Insert和@InsertProvider(@Select、@SelectProvider雷同)

    @Insert和@InsertProvider都是用来在实体类的Mapper类里注解保存方法的SQL语句.不同的是,@Insert是直接配置SQL语句,而@InsertProvider则是通过SQL工 ...

  4. Security Spring 配置

    <?xml version="1.0" encoding="UTF-8"?><beans:beans xmlns="http://w ...

  5. 【原理】scan

    SCAN 命令的保证(guarantees) 同一个元素可能会被返回多次. 处理重复元素的工作交由应用程序负责, 比如说, 可以考虑将迭代返回的元素仅仅用于可以安全地重复执行多次的操作上. 如果一个元 ...

  6. python--函数的返回值、函数参数的使用、名称空间与作用域、函数嵌套、函数对象

    今天学习内容有函数的返回值.函数参数的使用.名称空间与作用域.函数嵌套. 下来我们一一查看. 函数的返回值 看几个栗子: def func(x): y=func() print(y) def foo( ...

  7. PHP getcwd() 函数

    获取当前工作目录: <?phpecho getcwd()?> 结果: /home/php 定义和用法 getchwd() 函数返回当前工作目录. 语法 getcwd(); 技术细节 返回值 ...

  8. hdu 4826 Labyrinth(简单dp)

    Description 度度熊是一只喜欢探险的熊,一次偶然落进了一个m*n矩阵的迷宫,该迷宫只能从矩阵左上角第一个方格开始走,只有走到右上角的第一个格子才算走出迷宫,每一次只能走一格,且只能向上向下向 ...

  9. 洛谷 P2441 角色属性树

    题目描述 绪萌同人社是一个有趣的组织,该组织结构是一个树形结构.有一个社长,直接下属一些副社长.每个副社长又直接下属一些部长……. 每个成员都有一个萌点的属性,萌点属性是由一些质数的萌元素乘积构成(例 ...

  10. paper 147:Deep Learning -- Face Data Augmentation(一)

    1. 在深度学习中,当数据量不够大时候,常常采用下面4中方法:  (1)人工增加训练集的大小. 通过平移, 翻转, 加噪声等方法从已有数据中创造出一批"新"的数据.也就是Data ...