最近師兄搞了一下螞蟻金服的 ant-design提供的后臺模板框架（基于react）由于這個模板使用的是dva框架室囊，里面各種ES6/ES7的新思想，于是小研究了一下effects度秘。主要是模擬effetcs的異步機(jī)制陋桂。
ant官方栗子:
export default {
namespace: 'puzzlecards',
state: {
data: [],
counter: 0,
},
//+++++++++++++++++++++++++++主要實現(xiàn)一下功能+++++++++++++++++++++++++++++++++++++++++
effects: {
*queryInitCards(_, sagaEffects) {
const { call, put } = sagaEffects;
const endPointURI = 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke';
const puzzle = yield call(request, endPointURI);
yield put({ type: 'addNewCard', payload: puzzle });
yield call(delay, 3000);
const puzzle2 = yield call(request, endPointURI);
yield put({ type: 'addNewCard', payload: puzzle2 });
}
},
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
reducers: {
addNewCard(state, { payload: newCard }) {
const nextCounter = state.counter + 1;
const newCardWithId = { ...newCard, id: nextCounter };
const nextData = state.data.concat(newCardWithId);
return {
data: nextData,
counter: nextCounter,
};
}
},
};
師兄實現(xiàn)的核心代碼
let url = "http://xxxx";
let param = { name: "xx", age: 22 };
console.log("before fetch<<<<<<<<<<<<<<<");
let generatorOutter = {
effects: {
* httpGet(_, sagaEffects) {
const { _call, _put } = sagaEffects;
let _param = { url: url, param: param }
let res = yield _call(_httpGet, _param);
console.log(res, "1",processId);
yield _put(callback, res,processId);
console.log(res, "2",processId);
yield _call((param)=>{
console.log("this is not a Promise fnc",processId);
console.log("normal fnc param:",param,processId);
},{ppip:processId})
},
}
}
//數(shù)據(jù)回調(diào)方法
function callback(resData) {
console.log(">>>>>>>>>回調(diào)獲取的數(shù)據(jù)<<<<<",processId);
console.log(resData,processId);
}
//主入口
let main = function () {
let generator = generatorOutter.effects;
for (let fnc in generator) {
let _step = generator[fnc](_, sagaEffects);
sagaEffects.setStep(_step);
_step.next();
}
}
let sagaEffects = {
step: new Object(),
setStep: function (_step) {
this.step = _step;
},
/*getStep: function () {
return this.step;
},*/
_call: function (fnc, param) {
let step = sagaEffects.step;
if (sagaEffects._chargePromise(fnc)) {
console.log("傳入Promise",processId);
fnc(param).then(res => {
if (step) step.next(res);
})
} else {
sagaEffects._async_call(fnc, param).then((res)=>{
if (step) step.next(res);
});
}
},
_put: function (callback, param) {
sagaEffects._async_call(callback, param).then((res)=>{
sagaEffects.step.next(res);
});
},
_async_call:async function(fnc, param){
return await fnc(param);
},
_chargePromise(fnc) {
if (fnc !== null && ( typeof fnc === 'function') &&typeof fnc.then === 'function')
return true;
return false;
},
_closeGenerator(){}
}
async function _httpGet({url, param}) {
url = handlerParams(url, param);
try {
const response = await fetch(url, { credentials: 'include', method: 'GET' });
return await response.json();
} catch (e) {
console.log(e);
}
}
//開始測試
main();
看下效果，我同時調(diào)用了6次分別傳入不同的id以區(qū)別,id順序不是1-6說明異步有效
image.png
看下網(wǎng)絡(luò)請求得运，同時發(fā)起
image.png
End
這里我主要實現(xiàn)了sagaEffects中的call和put方法姑蓝，也就是傳入的方法的執(zhí)行和返回數(shù)據(jù)，ES6的異步還是很有意思的吕粗，代碼簡潔了不少纺荧。
2018-11-19
