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"}