首先在使用前是參考了這位大神的文章:
原文鏈接: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)地獄了.