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

声明:本人是第一次写小程序项目,有写的不对的地方,大佬们指点指点。

简介

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

  1. 注册 Trello 账号–>注册为开发者 –>获取 trello 开发者的key –>生成 token。然后进入Trello API 文档获取需要的接口。
  2. 成为微信小程序开发者,具体步骤请参考https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getstart.html
  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 的接口、掘金的文章,拿到数据后进行其他操作,使用回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 获取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 证书,所以当你上传了代码,使用体验版本时,会发现所有的接口都获取不到数据,这时你需要去微信小程序后台管理页面 开发 –> 开发设置 –> 服务器域名: 把域名填配置在这里。如果提示你域名未备案,可以做域名转发,自己不会的话可以请教后台的大哥帮忙。

欧克,总结完毕!!!


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