微信小程序 Promise最简单的用法,解决异步问题

用小程序做东西时遇到一个异步问题,比如上传图片需要读取返回的真实地址时,因为小程序异步的原因,程序会继续往下执行

往往是图片还没传完,下一步的函数都运行完了,这个时候根本取不到真实地址。

查看了很多文章,大部分都说用Promise来阻塞异步解决, 但是看了下Promise的用法文章,可能我才疏学浅,没太搞懂。

后来我参考了一个高手写的代码,终于知道如何用了,具体原理我就不想深究了,使用套路写在下面:

 

 我觉得不要做什么Promise API封装  不需要JS页面 import 这个封装函数,只会让人越搞越晕

 

 let  PromiseArr = []

 PromiseArr.push(new Promise((reslove,reject)=>{

 //这里写你想要阻塞的函数 ,比如wx.request 啊 wx.cloud.uploadfile啊 等等

 success:res=>{

  //这里写逻辑,比如获取图片云存储的真实地址  this.data.imagePath =  res.fileId 等等

  reslove();

  }

 })) 

 //关键的执行步骤

Promise.all(PromiseArr).then(res=>{

//这里就可以开始写下一步执行的函数了 ,甚至也可以做Promise的嵌套,再写一个在里面

 this.setdata({

  //把上一步获得的结果进行加工, 这样的就不会异步了。 

   images: this.data.imagePath

})

 })

 

只要按照以上套路出牌,基本上是没问题的。

 

<p style="background-color:transparent;color:#424242;text-align:left;"> <span style="background-color:#D8D8D8;">原生小程序开发有哪些痛点?<br /> 频繁调用 setData及 setData过程中页面跳闪<br /> 强制将WXSS、WXML和JS代码分离到3个不同的文件中<br /> 没有状态管理,参考Vuex和Redux<br /> 没有过滤器<br /> 不能使用 less、scss 等预编译器<br /> 组件化支持能力太弱(几乎没有)</span> </p> <p style="background-color:transparent;color:#424242;text-align:left;"> <span style="background-color:#D8D8D8;"><br /></span> </p> <p style="background-color:transparent;color:#424242;text-align:left;"> <span style="background-color:#D8D8D8;">为什么使用第三方框架开发微信程序?<br /> 只要熟悉vue或react即可快速上手,学习成本低 <br /> 一套代码可在多端编译运行(微信,支付宝,h5,RN)  支付宝小程序暂不完善<br /> 组件化开发,完美解决组件隔离,组件嵌套,组件通信等问题 <br /> 支持使用第三方 npm 资源<br /> 使小程序可支持 Promise解决回调烦恼<br /> 可使用 Generator Fu-nction / Class / Async Function 等特性,提升开发效率 <br /> 对小程序本身的优化,如生命周期的补充,性能的优化等等<br /> 支持样式编译器: Scss/Less,模板编译器,代码编译器:Babel/Typescript。</span> </p> <p style="background-color:transparent;color:#424242;text-align:left;"> <span style="background-color:#D8D8D8;">结论:为了组件化开发,核心就是为了高效开发</span> </p> <br />
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页