微信小程序踩坑系列——从wx.request谈谈异步处理

RdouTyping 发布于2019-08-23 12:09 / 653人阅读

摘要：其实我们在同步流程中才说返回，异步没有返回这个概念或者说异步返回是没有意义的，异步对应的是回调，也就是说，对于一个异步函数，我们应该传入一个回调函数来接收结果。

原文链接：https://www.xksblog.top/talk-...

见到wx.request的第一眼，就让我想起了$.ajax这东西，使用起来确实有很多不方便，不能忍，幸好小程序是支持ES6语法的，所以可以使用promise稍加改造。

先来说说wx.request为什么不能忍。

铺垫：“看得见却抓不住“的异步请求

Page({
  data: {
    myData: ""
  },
  // loadMyData函数用于打印myData的值
  loadMyData () {
    console.log("获取到的数据为：" + this.data.myData)
  },
  // 生命周期函数onload用于监听页面加载
  onload: function () {
    wx.request({
      url: "https://api",  // 某个api接口地址
      success: res => {
        console.log(res.data)
        this.setData({
          myData: res.data
        })
        console.log(this.data.myData)
      }
    })
    // 调用之前的函数
    this.loadMyData()
  }
})

然后我们会在控制台到这样的结果：

这其实是一个很简单的异步问题，wx.request是异步请求，JS不会等待wx.request执行完毕再往下执行，所以JS按顺序会先执行this.loadMyData()，等服务器返回数据以后，loadMyData()早就执行完了，当然也就没有拿到值啦。

其实我们在同步流程中才说“返回”，异步没有“返回”这个概念（或者说异步返回是没有意义的），异步对应的是“回调”，也就是说，对于一个异步函数，我们应该传入一个“回调函数”来接收结果。

初步解决：通过回调接收结果

最简单的解决方案，就是把需要使用异步数据的函数写在回调里：

...
onload: function () {
  wx.request({
    url: "https://api",  // 某个api接口地址
    success: res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      // 把使用数据的函数写在回调函数success中
      this.loadMyData()
    }
  })
}

这样就可以正确输出了：

但是如果逻辑复杂，需要多层异步操作，会出现怎么样的情况呢？

asyncFn1(function(){
  //...
  asyncFn2(function(){
    //...
    asyncFn3(function(){
      //...
      asyncFn4(function(){
        //...
        asyncFn5(function(){
           //...
        });
      });
    });
  });
});

有没有感觉头皮发麻？什么优雅什么可读性，瞬间荡然无存，这就是恐怖的“回调地狱”（Callback Hell）。

而我们发现，微信小程序的网络请求wx.request，也正是这种依靠回调函数的形式，类似于以前的$.ajax，它在逻辑复杂、页面执行顺序要求多的情况下，弊端也是很明显的。不过好在小程序支持ES6，我们可以尽情地拥抱Promise！

使用Promise包装wx.request

Promise这东西简单说来就是，它可以将异步的执行逻辑和结果处理分离，摒弃了一层又一层的回调嵌套，使得处理逻辑更加清晰。想具体了解的还请自行查找资料。

现在我们就用Promise包装一下wx.request：

/**
 * requestPromise用于将wx.request改写成Promise方式
 * @param：{string} myUrl 接口地址
 * @return: Promise实例对象
 */
const requestPromise = myUrl => {
  // 返回一个Promise实例对象
  return new Promise((resolve, reject) => {
    wx.request({
      url: myUrl,
      success: res => resolve(res)
    })
  })
}
// 我把这个函数放在了utils.js中，这样在需要时可以直接引入
module.exports = requestPromise

现在再使用试试：

// 引用模块
const utilApi = require("../../utils/util.js")
Page({
  ...
  // 生命周期函数onload用于监听页面加载
  onLoad: function () {
    utilApi.requestPromise("https://www.bilibili.com/index/ding.json")
    // 使用.then处理结果
    .then(res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      this.loadMyData()
    })
  }
})

结果和使用回调函数一致。当有多个异步请求时，直接不断地.then(fn)去处理即可，逻辑清晰。

当然，这里只是写了一个最简单的Promise函数，还不完整。更完整的Promise化wx.request，等以后业务需要再完善吧。另外各种小程序开发框架也都有了现成的promise化API，拿来即用。

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98019.html

把微信小程序异步API转为Promise，简化异步编程，告别层层回调

摘要：微信官方没有给出来处理异步操作，而官方异步的又非常多，这使得多异步编程会层层回调，代码一复杂，回调起来就想砸电脑。是一个转换微信小程序异步为的一个工具库优点避免小程序异步编程多次回调带来的过多回调导致逻辑不清晰，篇幅过长等问题。把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便，谁用谁知道。微信官方没有给出Promise API来处理异步操作，而官方AP...

antz 2019-08-26 12:11 评论0 收藏0
微信小程序开发踩坑总结（持续完善中）

摘要：由于个人技术水平有限，在问题描述，解决方案中存在的问题，希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序，跟随自己开发过程中的问题出现时间而定。。微信小程序数据页面数据传递总结由于个人技术水平有限，在问题描述，解决方案中存在的问题，希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序，跟随自己开发过程中的问题出现...

tianhang 2019-07-01 12:38 评论0 收藏0
【浙政钉】微信-专有钉钉小程序-开发踩坑实记

摘要：一开始的思路是先将微信小程序转为钉钉小程序。接下来就是转化阶段，关于微信和钉钉具体可参考其开发文档。文章目录 ⭐【浙政钉】微信-专有钉钉小程序-开发踩坑实记⭐ ...

widuu 2021-11-15 11:37 评论0 收藏0
300行代码写一个音乐播放器小程序

摘要：项目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代码，更多关于小程序的内容可见微信小程序开发文档小程序框架结构微信小程序的入口是根目录下的它们分别描述的小程序的主题逻辑和公共配置部分。刚进公司不久，因为公司部门年后业务拓展的关系，可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作，因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完：如返...

chenatu 2019-08-20 13:56 评论0 收藏0
「前端早读君009」快速小程序开发之微信小程序内嵌 H5

摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。今日励志语要接受自己行动所带来的责任而非自己成就所带来的荣耀。前言微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...

wh469012917 2019-08-23 14:28 评论0 收藏0