#### 1、實現方法 ```javascript /** * 向指定api循環發送發送請求 * @param {string} apiName api名稱 * @param {object=} data 請求參數（可選） * @param {Function} cb 處理響應數據的回調 * @param {number=} interval 輪詢間隔（毫秒）（可選，默認為配置值） * @return {Object} 用于對輪詢狀態進行操作的實例 */ export function fetchInterval(apiName, data, cb, emit, interval) { const argumentsLength = arguments.length const defaultInterval = config.get('fetchInterval') if(argumentsLength === 2) { // 只傳了2個參數 // 沒傳data，沒傳interval cb = data data = null interval = null } else if(argumentsLength === 3) { // 只傳了3個參數 if(isFunction(cb)) { // 沒有傳interval interval = null } else if(isNumber(cb)) { // 沒有傳data interval = cb cb = data data = null } } data = data || {} interval = interval || defaultInterval let hasClosed = false const delayFetchInterval = delay( function() { if(hasClosed) { return } fetch(apiName, data, cb).then(res => { emit(res) delayFetchInterval() }) // fetch(apiName, data, cb) // .always(delayFetchInterval) }, interval ) delayFetchInterval(true) return { // 停止輪詢 close() { hasClosed = true } } } /** * 創建channel對象 * @param {string} apiName api名稱 * @param {Object=} data 請求參數（可選） * @param {Function} cb 處理推送數據的回調 * @return {Function} websocket連接斷開時需要執行的函數 */ function* createEventChannel(apiName, data, cb) { return eventChannel(emit => { if(config.get('mock')){ fetchInterval(apiName, data, cb, emit) return () => {} }else{ const ws = new ReconnectingWebSocket( apis.url(apiName, data) ) ws.onmessage= (message) => emit({data: JSON.parse(message.data)}) return () => { // ws.close(); }; } }); } /** * 實例化Channel對象，并監聽回調函數，根據回調分發action * @param {string} apiName api名稱 * @param {Object=} data 請求參數（可選） * @param {Function} cb 處理推送數據的回調 * @return {void} */ export function fetchSocket(apiName, data, cb){ return function* (createAction) { const channel = yield call(createEventChannel, apiName, data, cb); while(true){ const res = yield take(channel); yield put(createAction(res.data.result)) } } } ``` #### 2、代碼說明 > 2.1 `fetchSocket`方法首先調用`createEventChannel`方法生成`Channel`對象，`createEventChannel`內部調用`redux-saga`提供的`eventChannel`方法，此方法提供一個帶`emit`參數的回調函數，`emit`用于通知外部組件此函數執行結束并返回的結果，類似于`Promise`的`resolve`方法。所以，在`eventChannel`的回調函數里可以執行任何異步操作，在異步操作的回調函數里調用`emit()`方法，把結果作為參數返回即可。 > 2.2 `createEventChannel`成功返回了`Channel`對象，`const res = yield take(channel)`此段代碼用于監聽`emit`方法何時被觸發，`res`便是從`emit`方法帶回來的數據。 > 2.3 mock狀態下，需要用`feterInterval`模擬socket，因此`feterInterval`方法中需要傳入`emit`方法，以便于在每次`fetch`成功后可以觸發`emit`成功返回數據。 #### 3、使用方法 `fetchSocket`是個高階函數，調用時第一層跟往常一樣，傳入接口名稱、參數、回調函數。第二層則傳入生成`action`的方法。如下： ```javascript const apifetchMenu = (workTableMenuSuccess) => { return fetchSocket('fetchWorkTableLeftMenu')(workTableMenuSuccess) } /** * 監聽WORK_TABLE_MENU_REQUEST，調用對應API方法，請求數據 * @param {object} action 工作臺左邊導航的action對象 */ export function* fetchWorkTableMenu() { try { yield take(WORK_TABLE_MENU_REQUEST) yield call(apifetchMenu, workTableMenuSuccess) } catch (error) { yield put(requestFailed(error.message)) } } ```