一、概念
Promise,从语法上来讲,它是一个对象,是一个构造函数,可以获取 异步操作 的信息。
简单来讲,就是用同步的方式写异步代码,用来解决回调问题。
二、特点
Promise 对象有两个特点:
1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:
(1)、pending: 初始值
(2)、fulfilled: 操作成功
(3)、rejected: 操作失败
只有异步操作的结果可以决定当前是哪一个状态,任何其他状态都无法改变这个状态。
2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和 从 Pending 变为 Rejected 。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。
注:Promise 一旦新建就会「立即执行」,无法取消(new Promise() 里的函数会自动运行)。
三、Promise 方法
Promise 除了拥有自身的 all、race、resolve、reject 等方法外,在原型上还拥有 then、catch 方法。
看下列代码:
function promiseBegin(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(‘代码执行完成‘); resolve(‘回调数据‘); reject(‘失败回调数据‘); }, 2000); }); return p; }
promiseBegin();
当执行 promiseBegin 函数时,会得到一个 Promise 对象,在 Promise 的构造函数中,我们执行了一个setTimeout异步操作,2秒后,输出“代码执行完成”,并且调用resolve方法。
then() 方法
then() 方法有两个参数,一个是成功 resolve 调用的方法,一个是失败 reject 调用的方法。
promiseBegin().then(function(data){ console.log(data); //后面可以用传过来的数据做些其他操作 //...... },function(err) { console.log(err); });
catch() 方法
catch() 方法用于指定发生错误时的回调函数。
promiseBegin().then(function(data){ console.log(data); //后面可以用传过来的数据做些其他操作 //...... }).catch(function(err){ // 处理失败的操作 console.log(err) });
在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。
一般来说,不要在 then() 方法里面定义 Reject 状态的回调函数(即 then() 的第二个参数),总是使用 catch 方法。
链式调用
我们们可以在 then 方法中继续写 Promise 对象并返回,然后继续调用 then 来进行回调操作。
//买笔 function buy(){ console.log("开始买笔"); var p = new Promise(function(resolve,reject){ setTimeout(function(){ console.log("买了笔芯"); resolve("数学作业"); },1000); }); return p; } //写作业 function work(data){ console.log("开始写作业:"+data); var p = new Promise(function(resolve,reject){ setTimeout(function(){ console.log("写完作业"); resolve("作业本"); },1000); }); return p; } function out(data){ console.log("开始上交:"+data); var p = new Promise(function(resolve,reject){ setTimeout(function(){ console.log("上交完毕"); resolve("得分:A"); },1000); }); return p; } /* 不建议使用这种方式 buy().then(function(data){ return work(data); }).then(function(data){ return out(data); }).then(function(data){ console.log(data); });*/ //推荐这种简化的写法 buy().then(work).then(out).then(function(data){ console.log(data); });
all() 方法
Promise的 all() 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。
//买作业本 function cutUp(){ console.log(‘挑作业本‘); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(‘挑好购买作业本‘); resolve(‘新的作业本‘); }, 1000); }); return p; } //买笔 function boil(){ console.log(‘挑笔芯‘); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(‘挑好购买笔芯‘); resolve(‘新的笔芯‘); }, 1000); }); return p; } Promise.all([cutUp(),boil()]).then(function(results){ console.log("写作业的工具都买好了"); console.log(results); // ["新的作业本", "新的笔芯"] });
使用场景:预加载图片资源
race() 方法
race() 的用法与 all() 一样,只不过 all() 是等所有异步操作都执行完毕后才执行 then 回调。而 race() 的话只要有一个异步操作执行完毕,就立刻执行 then 回调。
注意:其它没有执行完毕的异步操作仍然会继续执行,而不是停止。
Promise.race([cutUp(), boil()]).then(function(results){ console.log("哈哈,我先买好啦"); console.log(results); });
使用场景:图片请求超时
function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = ‘xxxxxx‘; }); return p; } //延时函数,用于给请求计时 function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject(‘图片请求超时‘); }, 5000); }); return p; } Promise.race([requestImg(), timeout()]).then(function(results){ console.log(results); }).catch(function(reason){ console.log(reason); }); //上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。 //如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。 //如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。
随笔整理自
http://es6.ruanyifeng.com/#docs/promise
https://www.cnblogs.com/ainyi/p/8665272.html
感谢博主分享!
原文地址:https://www.cnblogs.com/gaosirs/p/10622581.html