如何在微信小程序中使用 Hprose（二）

Hprose 技术交流群：48855729

如何在微信小程序中使用 Hprose

书接上文。

这次仍然是下载 hprose-wx，或者从开源中国的 Git 服务器镜像下载。

这次我们发现 dist 目录下多了一个文件：

• regenerator-runtime.js

现在我们把它也下载下来，放在上一篇文章里说的那个微信小程序的 utils 目录下。

接下来，打开 pages/index/index.js 文件。

在开头加上：

var hprose = require('../../utils/hprose.js');
var co = hprose.co;
var regeneratorRuntime = require("../../utils/regenerator-runtime.js");
​

第一句是引入 hprose。

第二句引入的 co 是 hprose 中实现的协程，后面我们重点讲的就是它。

第三句引入了一个 regeneratorRuntime，这个又是干啥的呢？因为微信小程序的执行环境是 ES5 的，但是协程本身是 ES6 中才有的实现，所以呢，想直接用，是没有的。

但是呢，微信小程序开发环境提供了一个开启 ES6 转 ES5 的选项：

打开这个选项呢，ES6 的协程代码就自动转换成 ES5 的代码了，但是转换之后的代码其实是需要引用一个库的，这个库就是 regeneratorRuntime 这个东西。如果你不加入 regeneratorRuntime 这个库，那么就会看到 regeneratorRuntime 未定义的错误。

上面解释了这么多，如果听不懂也没关系，你就只要知道要用协程，就把上面三句话写上就可以了。

下面我们来看看使用协程的代码怎么来写：

之前我们实现 hprose 远程调用，是在 onLoad 事件中加入了以下代码：

    var client = hprose.Client.create("http://www.hprose.com/example/", ["hello"]);
    client.hello("world", function(result) {
      console.log(result);
    });
​

这段代码很异步，那我们把它 Promise 化一下吧。

    var client = hprose.Client.create("http://www.hprose.com/example/", ["hello"]);
    client.hello("world").then(function(result) {
      console.log(result);
    });
​

现在这段代码很 Promise 了，但是你可能觉得好像更复杂了。是这样吗？

确实是的，但是 Promise 化之后，有两个好处，一是 hello 方法的结果是一个 Promise 对象，你可以传递这个对象到其它地方了，而不需要把回调方法传过来了。第二个好处嘛，就是可以跟协程结合了。让我们来看看怎么跟协程结合。

    co(function*() {
        var client = hprose.Client.create("http://www.hprose.com/example/", ["hello"]);
        var result = yield client.hello("world");
        console.log(result);
    });
​

现在的代码，看上去很同步了吧。hello 的返回结果经过 yield 之后，就直接可以获取到值了。

co 除了可以将一个生成器作为协程执行以外，它还提供了一个 co.wrap 方法，这个方法可以将生成器包装成一个普通函数。所以，下面要放大招了：

//index.js

var hprose = require('../../utils/hprose.js');
var co = hprose.co;
var regeneratorRuntime = require("../../utils/regenerator-runtime.js");

//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: co.wrap(function *() {
    console.log('onLoad')
    var client = hprose.Client.create("http://hprose.com/example/", ["hello"]);
    var result = yield client.hello("world");
    console.log(result);
    //调用应用实例的方法获取全局数据
    this.setData({
      userInfo: yield app.getUserInfo
    });
  })
})
​

上一篇文章中的使用异步回调来完成调用的代码，现在就变成看上去很同步的使用协程方式的代码了。

当然关于 hprose 中的协程不仅仅如此，它比 tj 所实现的 co 协程要完美的多，也比 ES2016 所提供的 async/await 更加强劲，如果想要了解更多，可以阅读这篇 hprose 协程。

最后再强调一点：如果你用的是微信小程序的正式开发账号，那么连接的服务器地址应该是 https 的而不能是 http 的，而且应该在开发账号里设置要连接的服务器地址。

如何在微信小程序中使用 Hprose（三）