ES6 Promise对象
2017-03-16 23:10
507 查看
Promise ,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
Promise 对象有以下两个特点。
(1)对象的状态不受外界影响。 Promise 对象代表一个异步操作,有三种状态: Pending (进行中)、 Resolved (已完
成,又称 Fulfilled )和 Rejected (已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这
个状态。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Promise 对象的状态改变,只有两种可能:
从 Pending 变为 Resolved 和从 Pending 变为 Rejected 。
局限:
无法取消 Promise ,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函
数, Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚
开始还是即将完成)。
使用方法:
Promise对象是一个构造函数,用来生成promise实例
Promise 实例生成以后,可以用 then 方法分别指定 Resolved 状态和 Reject 状态的回调函数。
// then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用,第二个回调函数是
Promise 对象的状态变为 Reject 时调用。其中,第二个函数是可选的,不一定要提供。
Promise也可以用另外一个Promise对象的状态作为参数。
then 方法返回的是一个新的 Promise 实例(注意,不是原来那个 Promise 实例)。因此可以采用链式写法,即 then 方法后面
再调用另一个 then 方法。
一般来说,不要在 then 方法里面定义 Reject 状态的回调函数(即 then 的第二个参数),总是使用 catch 方法。
Promise.all()
Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例
p 的状态由 p1 、 p2 、 p3 决定,分成两种情况。
(1)只有 p1 、 p2 、 p3 的状态都变成 fulfilled , p 的状态才会变成 fulfilled ,此时 p1 、 p2 、 p3 的返
回值组成一个数组,传递给 p 的回调函数。
(2)只要 p1 、 p2 、 p3 之中有一个被 rejected , p 的状态就变成 rejected ,此时第一个被 reject 的实例的返
回值,会传递给 p 的回调函数。
Promise.race()
Promise.race 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例
上面代码中,只要 p1 、 p2 、 p3 之中有一个实例率先改变状态, p 的状态就跟着改变。那个率先改变的 Promise 实例的
返回值,就传递给 p 的回调函数。
Promise.resolve()
有时需要将现有对象转为 Promise 对象
Promise.reject()
Promise.reject(reason) 方法也会返回一个新的 Promise 实例,该实例的状态为 rejected
最后,来用Promise实现一个最简单的动画:
效果如下:
Promise 对象有以下两个特点。
(1)对象的状态不受外界影响。 Promise 对象代表一个异步操作,有三种状态: Pending (进行中)、 Resolved (已完
成,又称 Fulfilled )和 Rejected (已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这
个状态。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Promise 对象的状态改变,只有两种可能:
从 Pending 变为 Resolved 和从 Pending 变为 Rejected 。
局限:
无法取消 Promise ,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函
数, Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚
开始还是即将完成)。
使用方法:
Promise对象是一个构造函数,用来生成promise实例
var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); // resolve 函数的作用是,将 Promise 对象的状态从 “ 未完成 ” 变为 “ 成功 ” (即从 Pending 变为 Resolved ),在异步操作成功时调 用,并将异步操作的结果,作为参数传递出去 // reject 函数的作用是,将 Promise 对象的状态从 “ 未完成 ” 变为 “ 失败 ” (即从 Pending 变为 Rejected ),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise 实例生成以后,可以用 then 方法分别指定 Resolved 状态和 Reject 状态的回调函数。
promise.then(function(value) { // success }, function(error) { // failure });
// then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用,第二个回调函数是
Promise 对象的状态变为 Reject 时调用。其中,第二个函数是可选的,不一定要提供。
Promise也可以用另外一个Promise对象的状态作为参数。
var p1 = new Promise(function (resolve, reject) { setTimeout(() => resolve('success'), 3000) }) var p2 = new Promise(function (resolve, reject) { setTimeout(() => resolve(p1), 1000) }) p2.then(function(value){ console.log(value) },function(error){ console.log(error) }); // 三秒后P1的状态由Pengding变为Resolved,P2执行Resolved方法
then 方法返回的是一个新的 Promise 实例(注意,不是原来那个 Promise 实例)。因此可以采用链式写法,即 then 方法后面
再调用另一个 then 方法。
getJSON("/posts.json").then(function(json) { return json.post; }).then(function(post) { // ... }); // 依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数
前一个回调函数,有可能返回的还是一个 Promise 对象(即有异步操作),这时后一个回调函数,就会等待该 Promise 对象的状态发生变化,才会被调用。
getJSON("/post/1.json").then(function(post) { return getJSON(post.commentURL); }).then(function funcA(comments) { console.log("Resolved: ", comments); }, function funcB(err){ console.log("Rejected: ", err); }); // 运用箭头函数可以简写为 getJSON("/post/1.json").then(function(post){ return getJSON(post.commentURL) )}.then( comments => console.log("Resolved: ", comments), err => console.log("Rejected: ", err) });
getJSON 方法返回一个 Promise 对象,如果该对象状态变为 Resolved ,则会调用 then 方法指定的回调函数;如果异步操作抛出错误,状态就会变为 Rejected ,就会调用 catch 方法指定的回调函数,处理这个错误。另外, then 方法指定的回调函数,如果运行中抛出错误,也会被 catch 方法捕获。
p.then((val) => console.log("fulfilled:", val)) .catch((err) => console.log("rejected:", err)); // 等同于 p.then((val) => console.log(fulfilled:", val)) .then(null, (err) => console.log("rejected:", err));
一般来说,不要在 then 方法里面定义 Reject 状态的回调函数(即 then 的第二个参数),总是使用 catch 方法。
Promise.all()
Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例
var p = Promise.all([p1, p2, p3]);
p 的状态由 p1 、 p2 、 p3 决定,分成两种情况。
(1)只有 p1 、 p2 、 p3 的状态都变成 fulfilled , p 的状态才会变成 fulfilled ,此时 p1 、 p2 、 p3 的返
回值组成一个数组,传递给 p 的回调函数。
(2)只要 p1 、 p2 、 p3 之中有一个被 rejected , p 的状态就变成 rejected ,此时第一个被 reject 的实例的返
回值,会传递给 p 的回调函数。
Promise.race()
Promise.race 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例
var p = Promise.race([p1,p2,p3]);
上面代码中,只要 p1 、 p2 、 p3 之中有一个实例率先改变状态, p 的状态就跟着改变。那个率先改变的 Promise 实例的
返回值,就传递给 p 的回调函数。
Promise.resolve()
有时需要将现有对象转为 Promise 对象
Promise.resolve('foo') // 等价于 new Promise(resolve => resolve('foo'))
Promise.reject()
Promise.reject(reason) 方法也会返回一个新的 Promise 实例,该实例的状态为 rejected
var p = Promise.reject(' 出错了 '); // 等同于 var p = new Promise((resolve, reject) => reject(' 出错了 '))
最后,来用Promise实现一个最简单的动画:
<body> <div class = "ball ball1" style="margin-left:0;"></div> <div class = "ball ball2" style="margin-left:0;"></div> <div class = "ball ball3" style="margin-left:0;"></div> </body> <script type="text/javascript"> var ball = document.getElementsByClassName("ball"); var ball1 = ball[0]; var ball2 = ball[1]; var ball3 = ball[2]; function animate (ball, distance) { return new Promise(function(resolve, reject){ function ant() { let marginLeft = parseInt(ball.style.marginLeft); if(marginLeft === distance){ console.log("resolve"); resolve(); }else{ if(marginLeft < distance){ marginLeft++; }else{ marginLeft--; } ball.style.marginLeft = marginLeft+"px"; start(); } }; function start() { setTimeout(function(){ ant(); },13) }; start(); }) }; animate(ball1,100).then( () => animate(ball2, 200) ).then( () => animate(ball3, 300) ).then( () => animate(ball3, 150) ).then( () => animate(ball2, 150) ).then( () => animate(ball1, 150) ); </html>
效果如下:
相关文章推荐
- ES6 Promise 对象扯谈
- ES6中的异步对象Promise
- ES6 Promise对象概念及用法介绍
- ES6 Promise 对象
- ES6笔记(二)Promise对象
- ES6中的Promise对象小结
- ES6---new Promise()讲解,Promise对象是用来干嘛的?
- ES6 Promise 对象理解
- ES6 的 Promise 对象
- es6(一)——promise对象
- ES6 promise对象
- ES6学习笔记--promise对象
- ES6中Promise对象个人理解
- ES6 - promise对象的使用
- es6的Promise对象详解
- ES6 Promise对象学习笔记
- Nodejs与ES6系列2:Promise对象
- ES6 Promise对象概念与用法分析
- 谈谈 ES6 的 Promise 对象
- ES6 - Promise对象,异步操作