weex多个接口请求比较慢的解决方案

最新推荐文章于 2022-07-21 10:17:38 发布

原创

最新推荐文章于 2022-07-21 10:17:38 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javaScript #weex #promise all #async await

本文探讨了在Weex+Vue的商城项目中，如何解决分享图片到微信时，由于后台接口打码速度慢导致用户体验不佳的问题。通过采用Promise.all结合async/await异步调用单张图片接口，提高了接口请求效率，避免了用户等待时间过长，同时也保证了原生App接口的正常调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

weex微信分享多张图片比较慢

前沿

前沿

最近接触到weex的一个商城项目，主要用得技术栈是 weex+vue ，不了解weex的同学可以移步weex官方文档该项目主要是做淘宝优惠券的自动查找功能，类似于市面上的淘客APP，既然是一款c端产品那么当然涉及到微信分享、微信登陆这些主要的引流入口。

需求分析

进入主题，接到一个需求是，分享多张图片或单张到微信，这个功能本身是很简单就能实现的，拿到后台的图片数组传给IOS和安卓，他们直接唤起微信就ok了。但是，别太天真，产品的需求并非如此，而是分享的同时需要给我们分享的图片打上我们专有商品分享二维码，那么问题来了，因为weex不支持canvas画布，所以前端这边无法生成二维码，（这一点必须吐槽下weex），后台打码到图片上需要时间，也就是说这个接口请求速度对用户非常不友好，后来也证实了我的猜想，而且接口请求的速度慢还导致原生app那边API不能正常调起微信：

解决方案

与后台沟通，发现单张图片和多张图片不是同一接口，且单张的图片比多张图片打码的速度快很多的，那么解决方案就有了，可以采用Promise.all异步调取单张图片的接口，调取多次单张图片的接口这样就可以避免等待多张图片全部打码完成的时间了，代码如下：

//底部播货按钮popup
async sowBtnpost(project_id){
   
   
      let sessid = await util.getItem('txb_sessid')			//用户登陆信息是否失效
      if(sessid){
   
   
          this.shareImg = []        //初始化图片数组
          if(this.isClick) return
          let postUrl
          let funcArray = []		 //初始化方法数组
          let sendData = {
   
   project_id:project_id}
          if(this.changeiconType){
   
   
              postUrl = "/home/share_project_good_single"				//多图分享
              console.log(this.categoodsList<