Hprose 技术交流群:48855729
书接上文。
这次仍然是下载 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 的,而且应该在开发账号里设置要连接的服务器地址。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于