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

1,838 阅读4分钟

简介

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

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

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

积分规则如下

积分项 积分点 分值
掘金博客 发表一篇(阅读量100+,字数1000+,文字500+) 10
———— 点赞数第一 10
———— 阅读数第一 10
练习题 题目难度:hard 3
———— 题目难度:medium 2
———— 题目难度:easy 1

练习题在 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

做出修改,抽取request_fun,传入参数从单值传入,改为obj按需传入

// 获取board下归档的card
const request_fun = (obj) => {
  return new Promise(resolve, reject) => {
    wx.request({
      url: obj.url,
      success: (resp) => resolve(resp),
      fail: (err) => reject(err)
    }),
  }
}
const get_cards = (obj) => {
  // 返回一个Promise,拥有card接口返回值。
  return request_fun(obj);
}
// 获取所有的board
const get_board = () => {
  // obj,所有需要传入的参数,key: 需要传入的字段名
  let obj = {
    // 例如url,data,success,fail都可以作为参数传入
    url: 'https://****',
    data: {},
  }
  let promise_arr;
  // 此时的get_value拥有board接口返回的值
  return request_fun(obj).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 证书,所以当你上传了代码,使用体验版本时,会发现所有的接口都获取不到数据,这时你需要去微信小程序后台管理页面 开发 --> 开发设置 --> 服务器域名:

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

欧克,总结完毕!!!

原文链接:tech.gtxlab.com/WXTrello.ht…


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