在redux-observable中替换fetch请求网络数据

通常在React项目中会搭配redux来管理React的state状态. 由于项目有异步action的需求, 并且后续会使用到rxjs, 同时想要action层面保持良好的纯字面量风格, 这时就考虑使用redux-observable提供异步action的支持.

目前项目中用到异步action的场景主要是接口的请求, 在接入redux-observable之前项目是使用isomorphic-fetch来请求数据的, 接入中间件之后发现中间件本身的网络还是用的基于rxjs@5.x.x的ajax(XMLHttpRequest). 如果想用fetch来替换XMLHttpRequest在中间件中请求数据要怎么实现呢 ?

其实了解过fetch跟rxjs的特性的话应该会有思路. 首先中间件是通过执行Observable对象来支持异步aciton的, 其次fetch返回的是一个Promise对象, 而rxjs则可以把一个Promise对象包装成Observable对象. 那么我们按照这个套路把fetch包装到Observable对象里给epic方法使用是不是就能达到我们的目的了. 理论上来说是完全可行的, 那我们就以一个项目中的登录流程为例, 展示redux-observable + isomorphic-fetch的使用方式.

ACTION

因为使用了redux-observable中间件, 所以登录这个行为的action只是一个单纯的字面量. 发生登录行为时view直接dispatch该字面量就可以了.

/** * 登录action * @param account * @param pwd */export const loginAction = (account, pwd) => ({    type: ACTION_LOGIN,    data: {        account: account,        password: md5(pwd)    }});

代码跳转

Epic方法

在登录的epic方法中, 首先监听到action type为ACTION_LOGIN的分发, 然后按照中间件的特性将网络请求的结果封进一个新的action中, 再次分发出去. 这里将实现放入了一个工具方法中, 参数则是新action的type, 网络请求需要的相关数据等.

/** * 登录 epic * @param action$ */export const loginEpic = action$ =>    action$.ofType(ACTION_LOGIN)        .mergeMap(action => ajaxRequest({            actionType: ACTION_LOGIN_FULFILLED,            method: AJAX_METHOD.POST,            url: URL_LOGIN,            params: action.data        }));

代码跳转

ajaxRequest方法

在ajaxRequest方法中根据网络请求需要的参数构建出对应的Observable对象. 登录的调用是通过ajaxPost方法来构建的, 后面我们会说ajaxPost方法的实现. 当我们已经拿到Observable对象之后就要执行它并将结果或者异常以action的方式返回, 让epic方法重新dispatch出去.

/** * 提供给epic事件流使用, 根据参数构建request * @param requestParams {actionType, method, url, params} */export const ajaxRequest = requestParams => {    const {actionType, method, url, params} = requestParams;    let observable;    switch (method) {        case AJAX_METHOD.POST:            observable = ajaxPost(url, params);            break;        case AJAX_METHOD.GET:            observable = ajaxGet(url, params);            break;        case AJAX_METHOD.POST_FORM:            observable = ajaxPostForm(AJAX_METHOD.POST_FORM, url, params);            break;        case AJAX_METHOD.POST_MULTI_FORM:            observable = ajaxPostForm(AJAX_METHOD.POST_MULTI_FORM, url, params);            break;        default:            observable = ajaxGet(url, params);    }    return observable.map(data => ({        type: actionType,        data: data    })).catch(e => Observable.of({        type: actionType,        data: e    }));};

代码跳转

ajaxPost方法

ajaxPost很简单, 就是根据场景和isomorphic-fetch构建出application/json类型的post请求. 并将该fetch方法返回的Promise对象经过buildRequestObservable方法的包装封成Observable对象返回给ajaxRequest用.

/** * post请求json内容, 返回Observable promise 对象 * @param url * @param params * @returns {Observable.<T>|*} */export const ajaxPost = (url, params) => {    const content = JSON.stringify(params);    const data = {        method: AJAX_METHOD.POST,        headers: {            'Authorization': `Bearer ${localStorage.token}`,            "Content-Type": "application/json",            "Content-Length": content.length.toString()        },        body: content    };    return buildRequestObservable(fetch(url, data));};

代码跳转

buildRequestObservable方法

buildRequestObservable方法对参数中传递进来的fetch Promise对象进行拆解, 做一些公共处理, 然后重新打包成一个新的Promise对象. 如果请求成功则解析出正常的业务数据, 根据情况进行回调. 否则将请求失败和异常的情况包装到错误包中给reject出来. 最后通过rxjs的转换方法将新的Promise对象转化成Observable对象.

/** * 根据fetch promise对象构建出一个Observable * @param fetch * @returns {Observable<T>|*} */const buildRequestObservable = fetch => {    const request = new Promise((resolve, reject) => {        fetch.then((response) => {            if (!response.ok) {                reject(buildErrorInfo(RES_FAILED, 'response code error'));            }            response.json().then((data) => {                if (data.status === RES_SUCCEED) {                    resolve(data);                } else {                    reject(data)                }            });        }).catch((e) => {            reject(buildErrorInfo(RES_FAILED, e.toString()));        });    });    return Observable.fromPromise(request);};

代码跳转

到这里就成功在使用redux-observable时替换ajax(XMLHttpRequest)为isomorphic-fetch请求网络数据了. 由于我是对现有的系统进行进行改造的, 所以就没有用更加简单直接得代码Demo来展示, 顺便也分享一下这个CMS系统网络方面的设计, 同时也作为这个系统的文档之一. 项目Github地址: https://github.com/HiJesse/Demeter 欢迎交流.

转载请注明出处:http://blog.csdn.net/l2show/article/details/77444082