其实,我们以前在像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()方法。