我在微信小程序使用generator方案解決異步回調(diào)的一點(diǎn)總結(jié)

首先在使用前是參考了這位大神的文章:
原文鏈接:http://www.itdecent.cn/p/588f7e7f5555
自己在實(shí)際npm install co regenerator --save 后發(fā)現(xiàn)文章中的js對(duì)應(yīng)不到目前的版本了。
現(xiàn)在實(shí)際的使用的是你裝好后,進(jìn)入node_modules,找到co中的index.js及regenerator 里的runtime.js,將這兩個(gè)文件放入到小程序中。
我放的路徑在utils工具文件夾下。
在utils文件夾下,首先新建一個(gè)fetch.js封裝請(qǐng)求數(shù)據(jù)的接口

// 封裝請(qǐng)求接口
function getApi(method, url, params={}){
  method = method.toUpperCase()
  var methodHeader = {}
  if(method == "POST"){
    methodHeader = { "content-type": "application/x-www-form-urlencoded" }
  } else if (method == "GET") {
    methodHeader = { 'content-type': 'application/json' }
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: 'GET',
      header: methodHeader,
      data: params,
      success: function (json) {
        resolve(json)
      },
      fail: function (json) {
        reject(json)
      }
    })
  })
 
}

module.exports = getApi

為了在全局使用co和generator以及我自己封裝的getApi.
我在小程序的全局作用域,app.js中引入了

const co = require('./utils/co.js')
const regeneratorRuntime = global.regeneratorRuntime = require('./utils/runtime.js')
const getApi = require('./utils/fetch.js')
App({
  globalData: {
  },
  co: co,
  regeneratorRuntime: regeneratorRuntime,
  getApi: getApi,
  ...
)}

其實(shí)這里代碼寫的不夠優(yōu)雅,多少是有些冗余了。你可以自行修改。
然后在請(qǐng)求接口的頁(yè)面是這么用的:
首先在頂部需要引入,不引入regeneratorRuntime會(huì)報(bào)錯(cuò)說regeneratorRuntime 找不到么。這個(gè)原因我沒找到,估計(jì)是編譯后的代碼里直接需要使用全局變量regeneratorRuntime ,而小程序中全局變量需要用app.regeneratorRuntime 才能找到它。所以我重新賦值了一下。

var app = getApp();
var regeneratorRuntime = app.regeneratorRuntime; //這句是保證編譯后的代碼支持generator屬性

接下里在onLoad的生命周期里,請(qǐng)求接口:

onLoad:function(options){
      app.co(function* () {
        try {
      //  這里是參數(shù)
          var params = {
            "typeCode": "blabla",
            "ocms_preview": 1111
          }
          var result = yield app.getApi('get', 'https://www.maijia.com/blabla', params);
      // result就是你請(qǐng)求到的數(shù)據(jù),下面的操作根據(jù)自己的需求進(jìn)行
          that.setData({
            "loaded": true,
            "auth_deny": app.globalData.auth_deny,
            'tags': result.data.data
          });

          //緩存數(shù)據(jù)tagData 
          wx.setStorage({
            key: 'tagData',
            data: result.data.data
          })
        } catch (e) {
          // console.log(e) 這里是接口請(qǐng)求失敗的處理
          // 加載動(dòng)畫
          wx.showLoading({
            title: "加載失敗",
          });
        }
      });
}

這樣就可以在你的小程序里愉快的用generator來(lái)規(guī)避異步回調(diào)地獄了.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容