其实,我们以前在像jQuery
这样的库当中都有用过Promise
,它是用来处理一些异步操作的,jQuery当中的ajax
内部使用的就是这种模式:
$.ajax(...)
.then();
首先,这是一个异步请求,请求后会调用then()
方法,在其内部其实用的是jQuery当中的Deferred对象,该对象就是用来处理一些异步操作。
而现在,在ES6当中,我们可以使用内置的Promise了。
创建一个 Promise
let myPromise = new Promise( (resolve,reject)=>{
resolve( “ Resolved!!!! “ );
});
处理Promise
myPromise.then((res)=>{
console.log(res); //将打印Resolved!!!!
});
拒绝Promise
let myPromise = new Promise( (resolve,reject)=>{
setTimeout(()=>{
resolve(“Resolved!!!”);
},1000);
setTimeout(()=>{
reject(“Rejected!!!”);
},500);
});
//then(resolve,reject)
//reject为拒绝后执行的函数
myPromise.then((res)=>{
console.log(res); //将打印Resolved!!!!
},(err)=>{
console.log(err);
});
如果要拒绝一个Promise,then()
方法里传入的第二个函数就是用来处理被拒绝后的结果。
上面的代码将在0.5秒后打印 Rejected
。
另外,还有一种方法可以处理reject
,那就是使用catch()
方法:
myPromise.catch(()=>{
console.log(err);
});
多个 Promise
现在有两个Promise:
let myPromise = new Promise( (resolve,reject)=>{
setTimeout(()=>{
resolve(“Promise 1 Resolved!!!”);
},1000);
});
let myPromise2 = new Promise( (resolve,reject)=>{
setTimeout(()=>{
resolve(“Promise 2 Resolved!!!”);
},1000);
});
如果现在想等待两个Promise全部完成,那么可以使用Promise.all()
方法,该方法接收一个数组,数组项则是一些Promise集合:
Promise.all([myPromise,myPromise2]).then((data)=>{
console.log(data);
});
它的返回值则也是一个数组,数组项则是每个Promise 的返回值,上面的代码返将打印出:
["Promise 1 Resolved!!!","Promise 2 Resolved!!!" ]
如果其中有一个Promise被拒绝了,那么则会返回被拒绝的信息。现在我们修改一下myPromise2
,让它执行拒绝操作:
let myPromise2 = new Promise( (resolve,reject)=>{
setTimeout(()=>{
reject(“Promise 2 Rejected!!!”);
},1000);
});
这个时候将只会打印出 Promise 2 Rejected!!!
。
在fetch()中使用Promise
fetch()
是一些新浏览器才提供的api,是一种用来发送异步请求用的新方法,它返回的就是一个Promise。
fetch("/****/someUrl")
.then((res)=>{
res.json().then((data)=>{
console.log(data);
});
});
可以看到 ,上面返回的res
中的json()
方法返回的也是一个Promise,所以可以使用then()
方法。