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

简介

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处理异步的问题。

2、微信小程序端不引入第三方 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…

---

做者信息：宁文飞，人和将来大数据前端工程师