进阶使用
手写promise
常见面试题
前言
之前一直没有专门的去学过promise，只知道它可以用来解决'回调地狱'，是异步的一种实践方式。最近在项目中遇到无痛感刷新token时，要用到promise的特性，故在此记录下学习历程。
promise解决的问题
关于异步使用的最多的就是发送ajax请求后台数据，当一个页面不止一个请求且请求有先后关系时，就会遇到"回调地狱"的问题，在不使用async+await的情况下，我们通常会写出类似下面的代码
this.$axios.post(url,{}).then(res=>{
if(res.data.code==200){
this.$axios.post(url,{id:res.data.id}).then(resp=>{
if(resp.data.code==200){
console.log('接口请求完成')
}
})
}
})
坦然，当请求的接口无限堆砌的时候，我们的代码会变得臃肿和难以阅读，当遇到bug我们很难直接进行定位，这不利于高效开发和代码维护，也不利于协同开发。
使用promise改写
let p1 = new Promise((resolve,reject)=>{
this.$axios.post(url,{}){
if(res.data.code==200){
resolve({id:res.data.id})
}
}
})
let p2 = new Promise((resolve,reject)=>{
resolve(p1)
})
p2.then(res=>{
this.$axios.post(url,{id:res.id}).then(resp=>{
console.log('接口请求完成')
})
})
从视觉上看，我们将两次请求进行分开，结构更加清晰
promise语法
1-promise实例
let p = new Promise((resolve,reject)=>{//使用new操作符实例化promise，会返回一个promise对象
resolve() //发出成功通知
reject()//发出失败通知
}).then() //then方法相当于一个拦截器，允许我们获取resolve或者reject抛出的值，如果为空，则会向下一个 then传递
.then(success=>{//接受resolve通知
},error=>{//接受reject发出的通知
})
2-特殊点--新promise实例必须抛出状态而then（finally、catch）方法返回的promise默认抛出resolve
let p = new Promise((resolve,reject)=>{
//如果不手动抛出状态那么打印p的结果为pending
reject('出错了，请联系管理员')
})
let p2 = p.then(null,err=>{
console.log(err) //通过.then拦截抛出状态，这里得到'出错了，请联系管理员'
})
let p3 = p2.then(ok=>{ //p2是p通过then返回的promise，会默认抛出resolve，因此将打印'ok'
console.log('ok')
return new Promise((resolve,reject)=>{ //如果想控制抛出状态，那么我们可以在then中return一个新的 promise
reject('阿哦，出错了~')
})
},error=>{
console.log('error')
})
p3.then(null,reason=>{
console.log(reason) //这里的p3是一个新的promise，因此将根据抛出状态进行捕获
})
3-异常处理
new Promise((resolve,reject)=>{
//抛出错误
reject('err msg')
//或者
throw new Error('err msg')
}).then(null,err=>{//如果只有一个promise我们可以将then的第二个参数当作异常捕获的回调
}).catch(err=>{//当存在链式promise时，我们可以使用catch来统一捕获异常并处理
})
4-异步后处理
new Promise((resolve,reject)=>{
reject('err')
}).catch(err=>{}).finally(()=>{
//这里类似jquery中ajax请求的complete，我们可以在这里关闭一个loading动画
})
5-resolve/reject的妙用
let data = null,
pre_id = '上一个接口数据';
function getData(){
//缓存
if(data){
//由于外部使用了promise语法获取函数返回值，因此不能直接return data
return Promise.resolve(data)
}
if(!pre_id){
return Promise.reject('接口缺少请求参数')
}
return new Promise((resolve,reject)=>{
this.$axios.get(url,{pre_id}).then(res=>{
data = res.data
resolve(data)
})
})
.then(res=>{
return res
})
.catch(err=>{})
.finally(()=>{})
}
setInterval(()=>{
getData().then(res=>console.log(res)).catch(err=>{})
},1000)
6-批量执行promise
let p1 = new Promise((resolve,reject)=>{})
.catch(err=>{})//如果p1单独进行了错误处理，那么all方法将无法监听到p1的resolve，all得到的是catch返回的 promise，有默认的resolve
let p2 = new Promise((resolve,reject)=>{})
Promise.all([p1,p2]) //我们只需要给all方法传递一个由promise组成的数组，Promise就会批量进行调用
.then(res=>{ //这里的成功必须是p1和p2都抛出resolve状态，否则将走catch接口
}).catch(err=>{})
7-更松散的批量执行之allSettled
代码同6，在Promise.allSettled([p1,p2]).then(res=>{})//不强制p1p2均为resolve，永远不会走catch接口
8-龟兔赛跑之-race
let p1 = new Promise((resolve, reject) => {
setTimeout(()=>{
reject('网络错误')
},180)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('ok')
})
})
Promise.race([p1,p2]).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
以上就是promise的语法内容
我们学习任何事物都是一次从无到有、从走到跑的过程，只有了解其存在的语法，才能在实战中运用起来，大家加油
