用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序统计Trello、掘金积分程序,Promise做异步处理

Rolan 2019-5-28 00:24

Trello是一款团队管理工具。本文介绍的是使用微信小程序做一个积分排名的项目,从微信小程序端去调用Trello的接口、获取掘金上面的文章,按照特定的规则去积分。项目开始之前需要做一些准备工作:注册 Trello 账号-- ...

Trello是一款团队管理工具。本文介绍的是使用微信小程序做一个积分排名的项目,从微信小程序端去调用Trello的接口、获取掘金上面的文章,按照特定的规则去积分。项目开始之前需要做一些准备工作:

  1. 注册 Trello 账号-->注册为开发者 -->获取 trello 开发者的key -->生成 token。然后进入Trello API 文档获取需要的接口。
  2. 成为微信小程序开发者,具体步骤请参考 developers.weixin.qq.com/miniprogram…
  3. 获取genetalks_大数据里面的所有文章。

提示:使用微信开发者工具发请求前先把:微信开发者工具(右上角) --> 详情 --> 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 (✔ 上)

本次项目所做的小程序,微信扫码进入

积分规则如下

练习题在 Trello 里面,获取对应的 board(Trello 中的看板 )里面有 list(board 里面的任务列表) 里面有 card(对应任务、题目)。按照一定的约定在对应的 board 里面去创建 list --> card,完成了对应的任务才能去归档,然后获得对应的 board 里面归档的 card 对应参与排名者应该获得的积分。

只有博客在掘金里面,因此需要获取掘金里面的文章,但是掘金平台方面没有提供 api 接口,那么就只有自己去获取对应的 html 页面,然后做字符串截取了。

实现

因为页面比较简单,页面也少。下面说说Promise处理异步的问题。

二、微信小程序端不引入第三方 js 脚本的情况下处理异步问题。

本人所知的处理 js 异步问题的方法:

  1. 使用回调。缺点:代码逻辑变的复杂,回调层次根据你访问接口的次数越来越深。
  2. 使用 async await,但是不引入第三方 js 脚本,就不能使用。
  3. Promise,下面会讲解怎样使用 Promise,不再需要回调,代码可读性提高。

微信小程序发送请求。例:

统计积分需要获取 Trello 的接口、掘金的文章,拿到数据后进行其他操作,使用回调

let sort = () => {}; // sort函数做逻辑处理,排序操作
const get_data = () => {
  const _this = this;
  const get_board = (callback) => {
    wx.request({
      url: 'https://*****',
      success: resp => {
        // 拿到resp
        // 使用回调
        // 如果需要把resp传入过去,然后做逻辑处理
        // 回调里面使用了回调,把sort 当成参数传入、也可以不传入,直接在callback,里面调用。如果都正常返回的话此处调用了一次sort函数
        resp.data.forEach((item, index) => {
          callback(item, index === resp.data.length - 1 && sort);
        })
      }
    });
  };
  const get_cards = (data, callback) => {
    wx.request({
      url: data.url,
      success: () => {
        // 业务逻辑处理
        // ................
        callback && callback();
      }
    })
  }
  const get_blogs = (callback) => {
    wx.request({
      url: 'https//****',
      success: resp => {
        // 同上。。。。。
      }
    })
  }
  get_board(get_cards); // 获取board里面的cards 
  get_blogs(get_blog_detail) // 获取博客的内容
  // 然后调用get_board 、get_blogs,这样的话虽然也能做最后的逻辑处理,但是sort函数被执行了2次,并且还容易因为数据请求出错,而发生统计错误。
};
复制代码

使用Promise

// 获取board下归档的card
const get_cards = (data) => {
  const get_value = new Promise(resolve, reject) => {
    wx.request({
      url: data.url,
      success: (resp) => resolve(resp),
      fail: (err) => reject(err)
    })
  }
  // 返回一个Promise,拥有card接口返回值。
  return get_value;
}
const get_board = () => {
  // 获取所有的board
  const get_value = new Promise(resolve, reject) => {
    wx.request({
      url,
      success: (resp) => resolve(resp)
    })
  }
  let promise_arr;
  // 此时的get_value拥有board接口返回的值
  return get_value.then(resp => {
    // 遍历需要参与积分的board
    resp.data.forEach(item => {
      // 把每个card接口返回的Promise 存储到promise_arr数组里
      promise_arr.push(get_cards(item));
    })
    // Promise.all函数接收一个Promise数组
    // 使用Promise.all 等所有获取card的接口都执行完了会返回一个数组,数组的每一项对应board下面card的返回值
    return Promise.all(promise_arr)
  })
  // 博客的获取方式与上面获取card的方式一样  
}
  // 在写一个Promise.all()等待获取掘金博客的数据与获取Trello的数据都获取到了就可以执行最后的数据汇总及排序。调用sor()
  const get_data = () => {
    return Promise.all([get_board(), get_card()]).then(resp => return sort(resp));
  }
复制代码

微信小程序上线问题

  1. 微信小程序只能获取https的API
  2. 因为开发时选用的是不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书,所以当你上传了代码,使用体验版本时,会发现所有的接口都获取不到数据,这时你需要去微信小程序后台管理页面 开发 --> 开发设置 --> 服务器域名:

把域名填配置在这里。如果提示你域名未备案,可以做域名转发,自己不会的话可以请教后台的大哥帮忙。

欧克,总结完毕!!!

作者信息:宁文飞,人和未来大数据前端工程师

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 宁文飞 来自: 掘金