Promise的基本用法
所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。
Promise 对象的状态不受外界影响
三种状态:
- pending:进行中
- fulfilled :已经成功
- rejected 已经失败
状态改变:
Promise对象的状态改变,只有两种可能:
- 从pending变为fulfilled
- 从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了,这时就称为resolved(已定型)
基本用法
ES6规定,Promise对象是一个构造函数,用来生成Promise实例
const promist = new Promise(function(resolve,reject){
if(/*异步操作成功*/){
resolve(value);
}else{
reject(error);
}
})
resolve
函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从
pending
变为
resolved
),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject
函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending
变为 rejected
),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise 实例生成以后,可以用then 方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value){
//success
},function(error){
//failure
});
例子:
/*promise执行多步操作是非常好用的 *1.洗菜做饭 * 2.坐下来吃饭 * 3.收拾桌子 * * */ let state = 1; function step1(resolve,reject){ console.log('1.开始洗菜做饭'); if(state == 1){ resolve('洗菜做饭--完成') }else{ reject('洗菜做饭出错') } } function step2(resolve,reject){ console.log('2.坐下来吃饭'); if(state == 1){ //console.log(resolve('完成')); resolve('坐下来吃饭--完成') }else{ reject('坐下来吃饭--出错') } } function step3(resolve,reject){ console.log('3.收拾桌子'); if(state == 1){ resolve('收拾桌子--完成') }else{ reject('收拾桌子--出错') } } new Promise(step1).then(function(val){ console.log(val);//洗菜做饭完成 return new Promise(step2); }).then(function(val){ console.log(val); return new Promise(step3); }).then(function (val) { console.log(val); return val; });
Promise 实例生成以后,可以用then 方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value){
//success
},function(error){
//failure
});
例子:
function timeout(ms){ return new Promise((resolve,reject)=>{ setTimeout(resolve,ms,'done'); }); } timeout(100).then((value)=>{ console.log(value); });
let promise = new Promise(function(resolve,reject){ console.log('Promise'); resolve(); }); promise.then(function(){ console.log('resolved'); }); console.log('Hi!'); //Promise //Hi! //resolved
//异步加载图片 function loadImageAsync(url){ return new Promise(function(resolve,reject){ const image = new Image(); image.onload = function(){ resolve(image); }; image.onerror = function(){ reject(new Error('error'); }; image.src = url; }); }
下面是一个用Promise对象实现的 Ajax 操作的例子。
const getJSON = function(url) { const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; const client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send(); }); return promise; }; getJSON("/posts.json").then(function(json) { console.log('Contents: ' + json); }, function(error) { console.error('出错了', error); });