微信小程序統計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…

---

做者信息：寧文飛，人和將來大數據前端工程師