微信小程序利用co处理异步流程的方法教程

本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程，分享出来供大家参考学习，需要的朋友们下面来看看详细的介绍：

co

co是一个基于ES6 Generator特性实现的【异步流程同步化】写法的工具库。

co需要使用Promise特性，所以，我们先来创建一个使用Promise来处理的异步方法：

function myAsyncFunc() {
 return new Promise(function (resolve, reject) {
 setTimeout(function () {
 console.log("myAsyncFunction done!");
 resolve({
 data: "Hello,World"
 })
 }, 2000);
 });
}

然后，直接使用这个方法的话，就会如下，使用了then/catch的回调方式来处理调用结果和异常处理：

myAsyncFunc().then(function (result) {
 console.log(result.data); //Hello,World
}).catch(function (err) {
 //...
});

而如果是使用co的话，则会像这样：

co(function *() {

 try {
 var result = yield myAsyncFunc();
 console.log(result.data); //Hello,World
 } catch(e) {
 }

});

这样的写法，是不是就是我们非常熟悉的，比较符合逻辑思维习惯的同步写法了？

关于co的用法，在本文中我就不多展开了，有兴趣的朋友可以自行搜索相关资料。我今天要讲的是，如何在小程序环境下面成功的使用co。

1. 开启语言转译选项

由于要使用到ES6的generator，而又要为了兼容性，我们必须对ES6的语法进行降级转译，变成ES5。


开启语言转译选项

2. 引入generator支撑库

经过转译后的代码，需要依赖一个regeneratorRuntime，才能支持generator特性。Facebook开源的一个regenerator就是这样一个库，Github地址：https://github.com/facebook/regenerator/

你可以通过npm来下载这个regenerator库：

npm install regenerator

然后将下载文件中名为regenerator-runtime.js的文件拿出来，放到我们的小程序代码中去。

3.下载co和Promise库

接着，通过npm下载co库：

npm install co

将下载文件中名为co.js文件拿出来，放到我们的小程序代码中去。

因为需要依赖Promise，所以我们需要引入一个Promise实现库。在此我们选用一个小而兼容性好的库es6-promise。同样可以通过npm下载：

npm install es6-promise

将es6-promise.js放到我们的小程序代码中。

4.引入小程序代码中

使用前，将这些库正确的引入我们的代码：

const Promise = global.Promise = require('../../libs/es6-promise')
const regeneratorRuntime = global.regeneratorRuntime = require('../../libs/regenerator-runtime')
const co = require('../../libs/co')

好了，接下来就可以开始愉快的使用co进行编程了。

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 微信小程序利用co处理异步流程的方法教程

    微信小程序利用co处理异步流程的方法教程

    本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍: co co是一个基于ES6 Generator特性实现的[异步流程同步化]写法的工具库. co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法: function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () {

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • 微信小程序利用canvas 绘制幸运大转盘功能

    小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, restaraunts: [], //大转盘奖品信息 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var self = this; wx.getSystemInfo({ //获取系统信息成功,将系统窗口的宽高赋给页面的宽高 success:

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序利用云函数获取手机号码

    小程序获取手机号码方式 一.取到加密数据,然后提交到服务器解密, 二.获取到 cloudID,用云函数, 优点:直接获取原始数据,节省服务器资源 1.xml <button class="gettel" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 快捷获取</button> 2. 点击按钮调用云函数,将cloudID传给云函数 getPho

  • 微信小程序利用for循环解决内容变更问题

    问题描述 学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这个问题吧. 解决方案 整体思路是创建一个数组,将页面内容写进数组,利用for循环来达到遍历数组的目的,从而实现利用数组的变量来改变页面的内容. 第一步:首先在 js页面在 data 中创建一个数组名为 sums ,并在数组当中添加内容. 代码示例: data: { sums:[{ imgone:"/pages/img/ 一人之下

  • 微信小程序利用button控制条件标签的变量问题

    问题描述 在小程序中如何利用button按钮来实现控制条件标签的变量呢?这也许是许多小伙伴们的问题,今天就来简单的给大家演示一遍. 解决方案 第一步: 首先打开微信公众平台,将一个 primary 的 button 按钮代码复制到开发平台上,再为其绑定一个名为 " bindfirst " 的事件.(当然这个 bindfirst 的事件需要在 js 中去定义,下面的步骤将会去定义) 代码如下: <view> <button type="primary"

  • TensorFlow.js 微信小程序插件开始支持模型缓存的方法

    通常情况下,微信小程序追求的是短小精悍,即开即用,用完即走,适用于一些简单的应用场景.然而,随着微信小程序开放能力的提高,人们发现用微信小程序可以实现越来越多的功能,小程序也越来越复杂,越来越庞大起来.这个可以从小程序的大小限制的变化看出,最开始小程序的大小限制为1M,后来限制为2M,最新微信又给小程序提供了分包加载机制,开发者将小程序划分成不同的子包,用户在使用时按需进行加载,所有分包大小限制提高到8M. 虽然小程序的大小限制已经大大提升,但对于小程序开发者而言,仍然捉襟见肘.随便几个图片资源

  • 微信小程序首页数据初始化失败的解决方法

    微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

随机推荐