素材编辑 | 宋大狮

排版运营 | 小唐狮

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

阶段三：promisethen

描述：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)
 }
 })
 })
 } 
 }

阶段四：promiseasync/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 关于作者

• 宋大狮 | 执着于理想，纯粹与当下
• 小唐狮 | 广场舞大军中最靓的仔