码迷,mamicode.com
首页 > 其他好文 > 详细

Promise粗解

时间:2017-04-21 23:07:37      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:解决方案   异步   全局   es6   传递   add   函数   err   res   

一、Promise含义、作用、特点

Promise含义

  • 异步编程的一种解决方案;
  • 简单来说就是一个容器,里面保存这某个未来才会结束的事件(异步操作)的结果;
  • 从语法上来讲,是一个对象,可以获取异步操作的消息;

Promise作用

  • 可避免回调金字塔式的代码;
  • 优化异步流程;
  • 得到异步流程中的错误;

Promise对象的特点

对象的状态不受外界影响

  • Promise对象代表一个异步操作,用三种状态:pending(进行中)、resolve(已完成)、reject(已失败),只有异步操作的结果,可以决定当前是那种状态,任何其他操作都无法改变这个状态;

一旦状态改变,就不会再变,任何事情都可以得到这个结果;

  • Promise对象的状态改变只有两种可能,从pending到resolve和pending到reject;

二、基本用法

  • ES6规定,Promise对象是一个构造函数,用来生成Promise实例

生成Promise实例

let promise = new Promise(function(resolve,reject){
        //do something
        if(异步操作成功){
                resolve(value);
        }else{
                reject(error);
        }
});
  • Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject,两个参数也是函数,由JavaScript引擎提供,不用自己部署;
  • resolve函数的作用是将Promise对象的状态从pending变成resolve,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
  • reject函数的作用是将Promise对象的状态从pending变成reject,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去;

then方法

  • Promise实例生成后,可以用then方法分别指定resolve状态和reject状态的回调函数
promise.then(function(value){
        //success
},function(error){
        //failed
});
  • then方法可以接受两个回调作为参数,第一个回调函数是Promise对象的状态变为resolve时调动,第二个则是转变为reject时调用,第二个函数可选;
  • then方法返回的是一个新的Promise实例(不是原来的Promise实例),因此可以采用链式写法,即then方法后面再调用另一个then方法;

catch方法

  • catch方法是.then(null,reject)的别名,用于指定发生错误时的回调函数;

Promise.all()方法

  • Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例;
  • 用于多个Promise实例一起运行,都运行完毕返回结果;

Promise.race()方法

  • Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。
  • 用于多个Promise实例一起运行,只要有一个运行完毕就返回结果;

Promise.resolve()

  • 有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用;

Promise.reject()

  • Promise.reject(resson)方法也会返回一个新的Promise实例,该实例的状态为reject;

done()

  • Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,我们可以提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。

finally()

  • finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。

三、代码实例

多个异步操作,相互之间传递数据

let add1 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 1),1000)
    });
};

let add2 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 2),1000)
    });
};

let add3 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 3),1000)
    });
};

let add4 = function (value) {
    return new Promise(function(resolve,reject){
        setTimeout(resolve(value + 4),1000)
    });
};

add1(0)
    .then(function (value) {
        console.log(value);
        return add2(value);
    })
    .then(function (value) {
        console.log(value);
        return add3(value);
    })
    .then(function (value) {
        console.log(value);
        return add4(value);
    })
    .then(function (value) {
        console.log(value);
    })
    .catch(function (error) {
        console.log(error);
    })
------
1
3
6
10
  • 多个异步操作,每个异步操作都需要上一个一步操作的结果,保证每个异步操作都返回一个Promise对象;
  • then方法之后,也要用return传递异步操作的结果;

all()方法和race()方法

  • 大家一起走,全部到达终点就吃饭;
Promise.all([add1(0),add2(0),add3(0),add4(0)])
    .then(function (value) {
        console.log(value);
    })
    .catch(function (error) {
        console.log(error);
    });
------
[ 1, 2, 3, 4 ]
  • 大家一起走,只要一个人到达终点,就开始吃饭;
Promise.race([add1(0),add2(0),add3(0),add4(0)])
    .then(function (value) {
        console.log(value);
    })
    .catch(function (error) {
        console.log(error);
    });
------
1
待续...

Promise粗解

标签:解决方案   异步   全局   es6   传递   add   函数   err   res   

原文地址:http://www.cnblogs.com/liued/p/6746159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!