ES5中实现异步的常见方式不外乎以下几种：
1. 回调函数
2. 事件驱动
2. 自定义事件（根本上原理同事件驱动相同）
而ES6中的Promise的出现就使得异步变得非常简单。promise中的异步是这样的：
* 每当我需要执行一次异步操作的时候，我都需要new一个promise对象
* 每一个异步操作的Promise对象都需要设定一个成功执行的条件和成功的回调、一个失败的条件和失败的回调
* Promise对象可通过执行then()方法获得成功的回调信息
* Promise对象可通过执行catch()方法捕获失败的回调信息（当不执行catch方法时，若异步操作失败会报错）
一次常规异步操作的流程大致是这样的：
new Promise((resolve, reject)=>{ if(...){ // 设定异步操作成功的条件 resolve() // 设定异步操作成功 并返回 成功的回调信息 } else{ // 设定异步操作失败的条件 reject() // 设定异步操作失败 并返回 失败的回调 } }) .then((res)=>{ //执行异步操作，并且执行成功 ..... // 异步操作成功后的后续操作 ... .. }) .catch((err)=>{ // 执行一步操作，异步操作失败 ..... // 操作失败的后续操作 ... .. })
下面首先通过一个简单的例子来基本套用一下异步操作的流程
实际项目中经常会有这样的需求，很多功能都是需要在登录后才能去实现的，比如说我想要查看用户的个人信息，那么这个用户就必须先要登录，那么分解步骤后
第一步： 执行登录并且登录成功
第二步： 登录成功，开始获取用户信息
第三步： 获取用户信息成功，返回用户信息或成功的回调信息。
以上三步操作，需要两次异步操作，就需要两个异步的Promise对象
首先是准备工作：
// 两个状态用以分别判断两次异步操作是否成功 let status1 = 1; let status2 = 1; // 设定登录的异步操作 let doLogin = (resolve, reject) =>{ setTimeout(()=>{ if(status1 ==1){ resolve({status:1,msg: `异步执行 login ok`}) }else{ reject({status:0,msg: `异步执行 login failed`}); } },2000) } // 设定获取用户信息的异步操作 let getUserInfo = (resolve, reject)=>{ setTimeout(()=>{ if(status2==1){ resolve({status:1,msg: `异步执行 get user info ok`}); }else{ reject({status:0,msg: `异步执行 get user info failed`}); } },1000) }
紧接着开始执行异步操作：
new Promise(doLogin) .then((res)=>{ if(res.status==1){ console.log(res.msg); return new Promise(getUserInfo) // 若下一步要执行异步操作则必须返回一个promise对象用以链式操作 }else{ console.log(res.msg); } }) .then((res)=>{ console.log(res.msg) }) .catch((err)=>{ console.log(err.msg) })
感兴趣的可以通过控制status1、status2两个状态码体验一下不同情况下异步操作的流程与结果。
上面的例子搞清楚之后差不多也就理解了promise的基本用法。
你也可以配合同步代码体验效果：
console.log("同步执行111111111")
new Promise(doLogin)
.then((res)=>{
if(res.status==1){
console.log(res.msg);
return new Promise(getUserInfo)
}else{
console.log(res.msg);
}
})
.then((res)=>{
console.log(res.msg)
})
.catch((err)=>{
console.log(err.msg)
})
console.log("同步执行2222222")
而当你需要实现连续的异步操作时，需要在每一步异步操作后都返回一个promise对象，否则执行的还是同步操作。下面的例子可以证明：
let afterLogin1 = ()=>{ console.log("登录后续操作1") } let afterLogin2 = ()=>{ console.log("登录后续操作2") } new Promise(doLogin) .then((res)=>{ console.log(res.msg) }) .then((res)=>{ setTimeout(()=>{ afterLogin1(); },1000) }) .then((res)=>{ afterLogin2(); })
例子的输出结果为：
异步执行 login ok
登录后续操作2
登录后续操作1
Promise.all() 多异步操作，所有异步执行需全部成功
all() 方法需要传入的参数为对象数组，只有当数组中的所有异步对象都能够成功回调后，all() 方法返回的promise对象才能执行成功的回调。
* 创建Promise对象：
function creatPro (flag,oSucc,oFail) { let pro = new Promise((resolve, reject)=>{ setTimeout(()=>{ if(flag){ resolve(oSucc) }else{ reject(oFail) } },1000) }) return pro }
当所有异步对象都能执行成功回调时，all方法的成功回调返回一个所有对象成功回调数据的集合
let p1 = creatPro(true,{status:1,msg:"异步成功1"},{status:0,msg:"异步失败1"}); let p2 = creatPro(true,{status:1,msg:"异步成功2"},{status:0,msg:"异步失败2"}); let p3 = creatPro(true,{status:1,msg:"异步成功3"},{status:0,msg:"异步失败3"}); Promise.all([p1,p2,p3]) .then((res)=>{ console.log(res); }) .catch((err)=>{ console.log(err); })
* 当出现失败的异步操作时，则返回第一个失败的异步回调信息
let p1 = creatPro(true,{status:1,msg:"异步成功1"},{status:0,msg:"异步失败1"}); let p2 = creatPro(false,{status:1,msg:"异步成功2"},{status:0,msg:"异步失败2"}); let p3 = creatPro(false,{status:1,msg:"异步成功3"},{status:0,msg:"异步失败3"});
控制台的结果为：{status: 0, msg: "异步失败2"}
Promise.race() 多异步操作，顾名思义，返回的为第一个执行完成的回调信息，无论是成功还是失败。
看的是执行的速度，谁快返回谁：
function creatPro (flag,oSucc,oFail,timeout) { let pro = new Promise((resolve, reject)=>{ setTimeout(()=>{ if(flag){ resolve(oSucc) }else{ reject(oFail) } },timeout) }) return pro } let p1 = creatPro(true,{status:1,msg:"异步成功1"},{status:0,msg:"异步失败1"},5000); let p2 = creatPro(false,{status:1,msg:"异步成功2"},{status:0,msg:"异步失败2"},1000); let p3 = creatPro(true,{status:1,msg:"异步成功3"},{status:0,msg:"异步失败3"},500); Promise.race([p1,p2,p3]) .then((res)=>{ console.log(res); }) .catch((err)=>{ console.log(err); })
执行结果：{status: 1, msg: "异步成功3"}