Promise的作用
简单来讲,Promise就是能把ES5的回调写法分离出来,在异步操作执行完成后,用链式调用的方式执行回调函数。它接受两个参数:resolve回调函数和reject回调函数,resolve执行fullfiled状态的回调,reject执行rejected的回调。
链式写法
const getToken = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('token获取执行结束')
resolve('238232397329732923923923923')
},1000)
})
}
const getUser = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('user获取执行结束')
resolve('小明')
},1000)
})
}
const getUserAge = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('age获取执行结束')
resolve('19岁')
},1000)
})
}
// 开始调用
getToken().then(token=>{
console.log(token)
return getUser()
}).then(userName=>{
console.log(userName)
return getUserAge()
}).then(age=>{
console.log(age)
})
输出结果:
reject用法
reject跟resolve的写法一致,用于对rejected状态的回调处理。
const isToSchool = (userAge)=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(userAge>6 && userAge<12){
resolve('该年龄符合小学阶段入学标准')
}else{
reject('该年龄不符合小学阶段入学标准')
}
},1000)
})
}
isToSchool(12).then((resolve)=>{
console.log('resolve:',res)
},(reject)=>{
console.log('reject:',reject)
})
// 输出如下:
// reject: 该年龄不符合小学阶段入学标准
catch用法
catch和reject(then的第二个参数)有相同的作用,可以用于对rejected状态的回调处理。但是它还有另外一个作用,跟try…catch的catch作用类似,用于捕获代码的异常处理,防止因为报错而卡死。注意:它是对then里面的代码做异常处理。如下:
const isToSchool = (userAge)=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(userAge>6 && userAge<12){
resolve('该年龄符合小学阶段入学标准')
}else{
reject('该年龄不符合小学阶段入学标准')
}
},1000)
})
}
isToSchool(7).then((res)=>{
console.log(user) // user未声明
console.log(res)
}).catch((reason)=>{
console.log('我捕获到了错误:',reason)
})
all的用法
all方法是用于多个异步并行请求,全部执行结束之后,汇总成数组数据返回给resolve。
const getToken = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('token获取执行结束')
resolve('238232397329732923923923923')
},1000)
})
}
const getUser = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('user获取执行结束')
resolve('小明')
},2000)
})
}
const getUserAge = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('age获取执行结束')
resolve('19岁')
},500)
})
}
Promise.all([getToken(),getUser(),getUserAge()]).then((res)=>{
console.log('三个函数都执行完毕了',res)
})
race的用法
race,赛跑。Promise提供这个race,是指谁跑得快就执行谁的回调。如下:
const getToken = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('token获取执行结束')
resolve('238232397329732923923923923')
},1000)
})
}
const getUser = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('user获取执行结束')
resolve('小明')
},2000)
})
}
const getUserAge = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('age获取执行结束')
resolve('19岁')
},500)
})
}
Promise.race([getToken(),getUser(),getUserAge()]).then((res)=>{
console.log('三个函数都执行完毕了',res)
})