素材编辑 | 宋大狮
排版运营 | 小唐狮
ONE 问题描述
今天要和大家分享的是js的问题，主要是关于个人曾经在学习js时，对promise的一些简单理解，内容主要围绕promise的作用展开，希望能够帮助有需要的朋友，极致快速的搞懂promise。
需求： 许多小白在学习promise时，往往搞不懂为什么要使用它，以及它是如何由来的，而这一点，甚至对于一些刚工作不久的朋友，也是会迷迷糊糊。
问题： 从解决异步变同步的发展阶段出发，理清promise的作用。
TWO 发展阶段
阶段一：回调函数 普通
描述： 回调里面嵌入回调。但会导致层次很深，代码维护起来特别复杂，产生回调地狱问题。
示例：
getData(){
//获取分类列表id
uni.request({
url:"",
success:res=>{
let id=res.data[0].id
// 根据分类id获取该分类下的所有文章
uni.request({
url:"",
data:{
cid:id
},
success:res2=>{
//获取到一篇文章的id，根据文章id找到该文章下的评论
let id=res2.data[0].id;
uni.request({
url:"",
data:{
aid:id
},
success:res3=>{
//找到该文章下所有的评论
console.log(res3)
}
})
}
})
}
})
}
****
阶段二：回调函数 callback
描述： 把每一个request请求封装出一个函数，将结果进行返回。代码条理清晰了，但还是回调里面嵌套回调，并没有解决回调地狱的问题。
示例：
onLoad() {
//调用分类函数，并拿到函数的返回值
this.getNav(res=>{
let id=res.data[0].id;
//拿到分类id作为参数
this.getArticle(id,res2=>{
//拿到文章id作为参数
let id=res2.data[0].id;
this.getComment(id,res3=>{
//最终获取到第一个分类下，第一篇文章下，所有评论
console.log(res3)
})
})
});
}
methods: {
//先获取分类接口，将结果进行返回，到调用函数的地方获取
getNav(callback){
uni.request({
url:"",
success:res=>{
callback(res)
}
})
},
//获取文章数据，将文章列表进行返回
getArticle(id,callback){
uni.request({
url:"",
data:{
cid:id
},
success:res=>{
callback(res)
}
})
},
//获取文章下的所有评论
getComment(id,callback){
uni.request({
url:"",
data:{
aid:id
},
success:res=>{
callback(res)
}
})
}
}
阶段三：promise then
描述：promise初体验。promise本质上是一个构造函数，可以用它实例化一个对象。对象上有resolve、reject、all方法，原型上有then、catch方法。promise对象有三种状态：pending（初识状态/进行中）、resolved或fulfilled（成功）、rejected（失败）。用then去接收promise中的resolve回调的结果，但会产生冗余的then链式调用，不便于阅读。
示例：
//promise链式调用
this.getNav()
.then(res=>{
let id=res.data[0].id;
return this.getArticle(id);
})
.then(res=>{
let id=res.data[0].id;
return this.getComment(id)
})
.then(res=>{
console.log(res)
})
methods: {
//先获取分类接口，将结果进行返回，到调用函数的地方获取
getNav(callback){
return new Promise((resolve,reject)=>{
uni.request({
url:"",
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//获取文章数据，将文章列表进行返回
getArticle(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"",
data:{
cid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//获取文章下的所有评论
getComment(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"",
data:{
aid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
}
}
阶段四： promise async/await
描述：promise终极方案。await/async 这两个命令是成对出现的，如果使用await没有在函数中使用async命令，那就会报错，如果直接使用async没有使用await不会报错，只是返回的函数是个promise。用await去接收promise中的resolve回调的结果，且必须等待当前任务执行完毕。
示例：
async onLoad() {
let id,res;
res=await this.getNav();
id=res.data[0].id;
res=await this.getArticle(id);
id=res.data[0].id;
res=await this.getComment(id);
console.log(res)
}
methods: {
//先获取分类接口，将结果进行返回，到调用函数的地方获取
getNav(callback){
return new Promise((resolve,reject)=>{
uni.request({
url:"",
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//获取文章数据，将文章列表进行返回
getArticle(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"",
data:{
cid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
},
//获取文章下的所有评论
getComment(id){
return new Promise((resolve,reject)=>{
uni.request({
url:"",
data:{
aid:id
},
success:res=>{
resolve(res)
},
fail:err=>{
reject(err)
}
})
})
}
}
THREE 知识总结
总结一： 问题复盘
关于promise，在我们日常开发中，除非必要，其实应用的并不是很多。如果是必要使用，则优先考虑promise async/await。
总结二： 异步和同步的区别
同步：（类似打电话）执行完一个方法后，必须等待数据的返回，只有在收到消息后，才能执行其他命令。
异步：（类似收发短信）执行完一个方法后，不必等待数据的返回，可以直接执行其他命令。
FOUR 集思广益
欢迎大家对本问题留言或私信指教，一起学习提高！
- END -
ABOUT 关于作者
- 宋大狮 | 执着于理想，纯粹与当下
- 小唐狮 | 广场舞大军中最靓的仔
