泰安高品质网站建设,wordpress博客用什么服务器,wordpress手机app编辑文章,深圳创业板股票代码weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架#xff0c;主要是为前端开发者#xff08;可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为#xff1a;https://bmfe.github.io/eros-docs/#/。为了方便前端开发者和客户端开发者…weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架主要是为前端开发者可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为https://bmfe.github.io/eros-docs/#/。为了方便前端开发者和客户端开发者了解框架的原理和遇到问题时更快的定位我将从源码的角度解析功能。 eros主要功能介绍
eros cli是eros开发脚手架可以用来生成eros项目提供了编译打包运行更新等一系列开发功能。eros widget在js端提供了vue实例中可以方便调用的许多原生扩展功能请求路由事件发布订阅本地存储等。eros module在原生端对eros widget功能进行真正实现。eros component在原生端实现的扩展组件eros通过appboard配置实现多页面的公共代码js bundle抽出。eros通过mediator实现多页面内存共享。
首先从eros widget源码开始分析 eros widget提供了请求路由本地储存原生导航发布订阅等功能下面将从请求功能去分析eros widget源码实现。 在eors官网中介绍的请求的定义是axios前端的开发者看到这个会觉得很熟悉因为有个著名的前端开源Http请求框架也叫作这个名字我刚开始看到这个也是非常兴奋因为axios开源框架功能很强大所以觉得基于业务的Http请求封装很easy,可以直接复用了但是用了之后发现不是那么回事后面研究了源码之后才知道eros只是把请求功能叫axios这个名字但是跟开源框架axios背后实现原理实现功能完全不一样所以大家不要误解了
我们先从Js调用端开始分析
通过eros-cli创建项目之后我们可以看到关于请求的配置有两个地方 在config/index.js文件中我们可以看到就做了一个事情new widget()创建了一个widget对象。new widget是eros widget功能的入口在new widget()时通过传参完成了widget相关功能的配置图中ajax对象正是对widget axios功能的配置。通过require引用找到Widget定义的地方分析widget源码也就是eros widget库的相关代码。// 配置方法
import ./src/mixins.jsimport ./src/font.js
// 弹窗
import ./src/notice.js
// 获取地理位置
import ./src/geo.js
// 获取相机信息
import ./src/camera.js
// 图片操作相关
import ./src/image.js
// 设置导航
import ./src/nav.js
// 支付相关(已抽离第三方插件)
// import ./src/pay.js
// bindingx
import ./src/bindingx.js
// 存储相关
import ./src/storage.js
// 全局事件
import ./src/events.js
// 分享(已抽离第三方插件)
// import ./src/share.js
// 工具方法
import ./src/tools.jsimport ./src/coms.js// 路由
import Router from ./src/router.js
// 发送请求
import Axios from ./src/axios.jslet instance null
export default class Widget {constructor ({ router, ajax }) {if (!instance) {//这里是我们需要关注的这里创建的请求对象并且挂载在Vue里Vue.use(new Axios(ajax))Vue.use(new Router(router))instance this}return instance}
}2.代码我们可以很清楚的看到整个widget的功能都是在这里被引入的相关的配置信息也是通过widget的构造函数传到对应功能模块的。我们可以看到我们分析的Axios定义就在./src/axios.js这个文件里。继续往下分析axios.js代码
import _isFunction from lodash/isFunction
const bmAxios weex.requireModule(bmAxios)//请求的真正执行者这里对应一个weex原生自定义module,注册名字叫bmAxios
export default class Axios {//构造函数通过外部传递请求相关配置参数constructor ({ timeout, apis, baseUrl , requestHandler, responseHandler }) {this.apis apis //apis是配置请求别名的到路径的映射别名通过它可以找到真实路径this.timeout timeout//请求的超时时间this.baseUrl baseUrl//请求的基础urlthis.requestHandler requestHandler//请求的拦截器this.responseHandler responseHandler//响应的拦截器return this}//vue自定义组件安装函数前面说的vue.use()会调用该函数进行自定义组件的添加install (Vue) {/*** Contributor: Eric Xiao.* Description: extend promise.* Eros thanks every contributor.*/Promise.prototype.finally function (callback) {const P this.constructor;return this.then(value P.resolve(callback()).then(() value),reason P.resolve(callback()).then(() { throw reason }));};Promise.prototype.done function (onFulfilled, onRejected) {this.then(onFulfilled, onRejected).catch(function (reason) {// Throw a global errorsetTimeout(() { throw reason }, 0);});};const self this//此处是在vue原型中挂载一个$fetch函数挂载之后在vue实例中可以通过this.$fetch进行调用该函数该函数是eros http请求的调用函数支持多种http请求方式。Vue.prototype.$fetch (options) {return new Promise((resolve, reject) {//判断requestHandle是否是函数如果是函数则先执行requestHandle对请求进行处理处理完成后再由handleAxios处理否则直接由handleAxios处理。if (_isFunction(self.requestHandler)) {self.requestHandler(options, () { //统一的http功能处理handleAxios(options, resolve, reject) })} else {//统一的http功能处理handleAxios(options, resolve, reject)}})}//vue原型上提供this.$get发起get请求的调用逻辑同上Vue.prototype.$get (options) {options.method GETreturn new Promise((resolve, reject) {if (_isFunction(self.requestHandler)) {self.requestHandler(options, () { handleAxios(options, resolve, reject) })} else {handleAxios(options, resolve, reject)}})}//vue原型上提供this.$post发起Post请求的调用逻辑同上Vue.prototype.$post (options) {options.method POSTreturn new Promise((resolve, reject) {if (_isFunction(self.requestHandler)) {self.requestHandler(options, () { handleAxios(options, resolve, reject) })} else {handleAxios(options, resolve, reject)}})}//请求js端真正处理者function handleAxios (options, resolve, reject) {//首先对请求参数进行解析const { name, url, data, method, header, params } options//通过name去apis配置里找真正请求路径const requestPath name pathFormater(name, params)//这里才是真正的请求功能的发起者通过eros自定义weex的bmAxios原生模块真正发起请求,通过传递回调函数给原生从而在请求执行完之后获取到请求结果再由promise对结果进行分发如果自己定义了responseHandler函数则由调用者在responseHandler函数中根据http status和业务code去分发请求结果bmAxios.fetch({url: url || (self.baseUrl requestPath),data: data || {},method: method method.toUpperCase() || GET,header: header || {},timeout: self.timeout || 30000}, (resData) {// 统一的监控if (_isFunction(self.responseHandler)) {self.responseHandler(options, resData, resolve, reject)} else {resolve(resData)}})}//此函数是用来根据name去映射apis路径以及对路径参数进行赋值替换function pathFormater (name, params) {let _path self.apis[name]const matcher _path.match(/[^{][a-zA-Z0-9] (?\})/g)if (matcher matcher.length) {matcher.forEach(item {if (!params[item]) throw new Error(you are using dynamic params, but ${item} not existed in your params)_path _path.replace({${item}}, params[item] || undefined)})}return _path}}
}3.通过上面的代码分析我们知道了在vue中通过this.$fetch调用真正的js处理逻辑实际上js只是对请求参数进行定义和简单功能的封装。真正实现http调用处还是在原生这个原生是相对的如果jsbundle是运行在android上则是通过android weex模块去调用如果运行在ios则通过ios weex模块去调用。
下面分析eros android端源码
首先找到android erosSdk中的 AxiosModule.java类文件。这个类里面定义了js端调用的相关方法。
package com.benmu.framework.extend.module;import com.benmu.framework.constant.WXConstant;
import com.benmu.framework.constant.WXEventCenter;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.WeexEventBean;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;/*** Created by Carry on 17/1/16.*/public class AxiosModule extends WXModule {JSMethod(uiThread false)public void fetch(String params, final JSCallback jsCallback) {WeexEventBean eventBean new WeexEventBean();eventBean.setContext(mWXSDKInstance.getContext());eventBean.setKey( WXEventCenter.EVENT_FETCH);eventBean.setJsParams(params);eventBean.setJscallback(jsCallback);ManagerFactory.getManagerService(DispatchEventManager.class).getBus().post(eventBean);}//其他省略....
}整个类看起来很简单跟js端bmAxios对应的方法就一个fetch(),里面有两个参数一个为js传递过来的请求参数另外一个是js端的回调函数。我们可以看到方法的实现里面并没有具体的执行逻辑只是创建了一个叫做WeexEventBean的实体类并把参数params和jsCallback等传给了它并通过类似bus的对象给post出去了。在这里说一下所有的eros自定义module都是通过事件总线android otto框架的机制进行分发和功能处理的。WeexEventBean是对所有Module功能入口的统一封装它通过统一包装所有的js调用请求根据创建时定义的key通过反射分发到对应key的功能类上进行处理。下面我们找到WeexEventBean事件的接收处。
package com.benmu.framework.event;import android.app.Activity;
import android.content.Context;
import android.text.TextUtils;
import com.benmu.framework.adapter.router.RouterTracker;
import com.benmu.framework.constant.WXEventCenter;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.BaseEventBean;
import com.benmu.framework.model.WeexEventBean;
imporot cm.benmu.framework.utils.JsPoster;
import com.benmu.wxbase.EventGate;
import com.benmu.wxbase.EventGateFactory;
import com.squareup.otto.Subscribe;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.bridge.JSCallback;import java.util.ArrayList;/*** Created by Carry on 2017/8/23.*/public class DispatchEventCenter {//这里DispatchEventCenter创建了一个单例对象private static DispatchEventCenter mInstance new DispatchEventCenter();private DispatchEventCenter() {}public static DispatchEventCenter getInstance() {return mInstance;}//这里对DispatchEventCenter对象进行注册注册之后可以接收Bus分发的事件public void register() {ManagerFactory.getManagerService(DispatchEventManager.class).getBus().register(this);}//这里对DispatchEventCenter对象进行解注解注之后取消接收Bus分发的事件public void unregister() {ManagerFactory.getManagerService(DispatchEventManager.class).getBus().unregister(this);}//这里是WeexEventBean事件的接收所有eros module post出来的WeexEventBean类型对象都在这里接收之后进行转发Subscribepublic void onWeexEvent(WeexEventBean weexEventBean) {if (weexEventBean null) return;Context context safeContext(weexEventBean.getContext());if (context null) return;String params weexEventBean.getJsParams();switch (weexEventBean.getKey()) {case WXEventCenter.EVENT_IMAGE_UPLOAD://这里就是我们要找的key为EVENT_FETCH的处理地方case WXEventCenter.EVENT_FETCH://这里我们直接传递了一个class绝对路径的string此处的做法值得商榷。下面我们继续看reflectionClazzPerform方法reflectionClazzPerform(com.benmu.framework.event.http.EventFetch, context, weexEventBean, , weexEventBean.getKey());break;...中间省略default:reflectionClazzPerform(weexEventBean.getKey(), context, weexEventBean, );break;}}//真正反射创建对象的调用逻辑在这个函数里private void reflectionClazzPerform(String clazzName, Context context, WeexEventBean weexEventBean, String errosMsg, String type) {//这里EventGateFactory根据clazzName反射去创建对象但是为啥对象是EventGate类型的呢因为eros所有的Event都实现了EventGate接口所以创建出来的对象都是EventGate实现类的对象。EventGate event EventGateFactory.getEventGate(clazzName);String params weexEventBean.getJsParams();if (null ! event) {//根据上面调用逻辑type为WXEventCenter.EVENT_FETCH不为空直接走else逻辑if (TextUtils.isEmpty(type)) {event.perform(context, weexEventBean);} else {//event.perform是所有实现EventGate接口的Event对象执行功能的入口本文分析的是com.benmu.framework.event.http.EventFetch这个类下面我去找EventFetch对象的perform方法。event.perform(context, weexEventBean, type);}} else {//如果找不到对应的EVENT处理类则给js回调失败处理if (TextUtils.isEmpty(params)) {JsPoster.postFailed(weexEventBean.getJscallback());} else {JsPoster.postFailed(errosMsg, weexEventBean.getJscallback());}}}}
通过DispatchEventCenter 类我们把js端的调用真正的分发到了对应的事件类上进行处理每个事件类名对应着一个js调用模块的函数名。此处我们继续分析com.benmu.framework.event.http.EventFetch这个类
package com.benmu.framework.event.http;import android.content.Context;
import android.text.TextUtils;
import android.widget.Toast;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.benmu.framework.constant.Constant;
import com.benmu.framework.constant.WXEventCenter;
import com.benmu.framework.http.okhttp.OkHttpUtils;
import com.benmu.framework.http.okhttp.callback.StringCallback;
import com.benmu.framework.http.okhttp.exception.CancelException;
import com.benmu.framework.http.okhttp.exception.HttpException;
import com.benmu.framework.http.okhttp.exception.IrregularUrlException;
import com.benmu.framework.http.okhttp.utils.L;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.AxiosManager;
import com.benmu.framework.manager.impl.ImageManager;
import com.benmu.framework.manager.impl.ModalManager;
import com.benmu.framework.manager.impl.ParseManager;
import com.benmu.framework.manager.impl.PersistentManager;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.AxiosGet;
import com.benmu.framework.model.AxiosPost;
import com.benmu.framework.model.AxiosResultBean;
import com.benmu.framework.model.UploadImageBean;
import com.benmu.framework.model.UploadResultBean;
import com.benmu.framework.model.WeexEventBean;
import com.benmu.framework.utils.JsPoster;
import com.benmu.framework.utils.TextUtil;
import com.benmu.wxbase.EventGate;
import com.lzy.imagepicker.bean.ImageItem;
import com.squareup.otto.Subscribe;
import com.taobao.weex.bridge.JSCallback;import java.util.ArrayList;import okhttp3.Call;/*** Created by Carry on 2017/8/16.*/public class EventFetch extends EventGate {private JSCallback mUploadAvatar;private Context mUploadContext;//根据上面分析执行到这里Overridepublic void perform(Context context, WeexEventBean weexEventBean, String type) {String params weexEventBean.getJsParams();pe//此处type为WXEventCenter.EVENT_FETCH所以直接执行if里面的fetch方法if (WXEventCenter.EVENT_FETCH.equals(type)) {fetch(params, context, weexEventBean.getJscallback());} else if (WXEventCenter.EVENT_IMAGE_UPLOAD.equals(type)) {uploadImage(params, context, weexEventBean.getJscallback());}}//js端fetch请求分发到这里public void fetch(String params, final Context context, final JSCallback jscallback) {//创建参数解析管理类ParseManager parseManager ManagerFactory.getManagerService(ParseManager.class);//创建Axios执行管理类AxiosManager axiosManager ManagerFactory.getManagerService(AxiosManager.class);//把js 参数解析成Json对象JSONObject object parseManager.parseObject(params);//获取请求的Urlfinal String mUrl object.getString(url);Boolean noRepeat object.getBoolean(noRepeat);//如果重复发了则取消上一个请求if (noRepeat ! null noRepeat) {axiosManager.cancel(mUrl);}//此处提供了所有的restful请求方法说明js端可以发起所有的restful请求根据对应的method进行分发处理switch (object.getString(method)) {case OkHttpUtils.METHOD.GET:AxiosGet axiosGet parseManager.parseObject(params, AxiosGet.class);get(context, axiosManager, axiosGet, jscallback);break;case OkHttpUtils.METHOD.POST:AxiosPost axiosPost parseManager.parseObject(params, AxiosPost.class);post(context, axiosManager, axiosPost, jscallback);break;case OkHttpUtils.METHOD.HEAD:AxiosGet axiosHead parseManager.parseObject(params, AxiosGet.class);head(context, axiosManager, axiosHead, jscallback);break;case OkHttpUtils.METHOD.DELETE:AxiosPost axiosDelete parseManager.parseObject(params, AxiosPost.class);delete(context, axiosManager, axiosDelete, jscallback);break;case OkHttpUtils.METHOD.PUT:AxiosPost axiosPut parseManager.parseObject(params, AxiosPost.class);put(context, axiosManager, axiosPut, jscallback);break;case OkHttpUtils.METHOD.PATCH:AxiosPost axiosPatch parseManager.parseObject(params, AxiosPost.class);patch(context, axiosManager, axiosPatch, jscallback);break;}}//暂时只分析get请求其他是一样的。private void get(final Context context, AxiosManager axiosManager, AxiosGet axiosGet, finalJSCallback jscallback) {//此处只是调用axiosManager.get()方法真正的http调用发起逻辑是在axiosManager类里面通过给该方法传递StringCallback()回调获取到http执行之后的结果然后对结果进行解析之后回调到Js端。axiosManager.get(axiosGet.url, axiosGet.data, axiosGet.header, newStringCallback() {Overridepublic void onError(Call call, Exception e, int id) {//请求出现error之后的处理parseError(context, e, jscallback);}Overridepublic void onResponse(String response, int id) {//请求成功之后的处理parseResponse(response, jscallback, code);}}, axiosGet.url, axiosGet.timeout);}//请求错误的解析private void parseError(Context context, Exception e, JSCallback callback) {if (e instanceof CancelException) {//request canceledModalManager.BmLoading.dismissLoading(context);return;}AxiosResultBean bean new AxiosResultBean();if (e instanceof HttpException) {HttpException httpException (HttpException) e;bean.status httpException.getmErrorCode();bean.errorMsg httpException.getmErrorMessage();} else if (e instanceof IrregularUrlException) {IrregularUrlException irregularUrlException (IrregularUrlException) e;bean.status 9;bean.errorMsg irregularUrlException.getmErrosMeeage();}//请求错误之后给js端回调回调的data为AxiosResultBean到这里js——java——js 整个调用过程结束了if (callback ! null) {callback.invoke(bean);}}//请求正常的解析private void parseResponse(String response, JSCallback callBack, int code) {try {AxiosResultBean bean new AxiosResultBean();if (callBack ! null !TextUtils.isEmpty(response)) {bean.status code;bean.errorMsg ;bean.data JSON.parse(response);//请求正常返回之后给js端回调回调的data为AxiosResultBean到这里js——java——js 整个调用过程结束了callBack.invoke(bean);}} catch (Exception e) {e.printStackTrace();L.e(json 解析错误);AxiosResultBean bean new AxiosResultBean();bean.status -1;bean.errorMsg json 解析错误;if (callBack ! null) {//请求错误之后给js端回调回调的data为AxiosResultBean到这里js——java——js 整个调用过程结束了callBack.invoke(bean);}}}
}
通过EventFetch源码我们知道EventFetch只是做了请求参数的解析根据请求http method进行对应分发处理并且对http请求之后的结果进行封装之后发起jsCallback处理jsCallback调用之后整个js——java——js调用过程结束。但是真正http执行逻辑还在AxiosManager里面下面我们继续分析AxiosManager类
package com.benmu.framework.manager.impl;import android.content.Context;
import android.net.Uri;
import android.text.TextUtils;import com.benmu.framework.BMWXEnvironment;
import com.benmu.framework.extend.adapter.WeexOkhttp3Interceptor;
import com.benmu.framework.http.Api;
import com.benmu.framework.http.BMPersistentCookieStore;
import com.benmu.framework.http.okhttp.OkHttpUtils;
import com.benmu.framework.http.okhttp.builder.GetBuilder;
import com.benmu.framework.http.okhttp.builder.OkHttpRequestBuilder;
import com.benmu.framework.http.okhttp.builder.OtherRequestBuilder;
import com.benmu.framework.http.okhttp.builder.PostFormBuilder;
import com.benmu.framework.http.okhttp.callback.FileCallBack;
import com.benmu.framework.http.okhttp.callback.StringCallback;
import com.benmu.framework.http.okhttp.cookie.CookieJarImpl;
import com.benmu.framework.http.okhttp.exception.IrregularUrlException;
import com.benmu.framework.http.okhttp.log.LoggerInterceptor;
import com.benmu.framework.manager.Manager;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.UploadResultBean;
import com.benmu.framework.utils.AppUtils;
import com.benmu.framework.utils.DebugableUtil;import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.TimeUnit;import okhttp3.Call;
import okhttp3.HttpUrl;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.RequestBody;/*** Created by Carry on 2017/8/7. default implement by okHttpUtils*/public class AxiosManager extends Manager {private static final String DEFAULT_MEDIATYPE application/json; charsetutf-8;private static final String DEFAULT_HOST http://app.weex-eros.com;//创建OkHttpClient对象public OkHttpClient createClient(Context context, long timeout) {CookieJarImpl cookieJar new CookieJarImpl(new BMPersistentCookieStore(context));OkHttpClient.Builder builder new OkHttpClient.Builder().addInterceptor(new LoggerInterceptor(TAG))//接口超时时间 默认3000毫秒.connectTimeout(timeout 0 ? 3000L : timeout, TimeUnit.MILLISECONDS).readTimeout(timeout 0 ? 30000L : timeout, TimeUnit.MILLISECONDS).cookieJar(cookieJar);if (DebugableUtil.isDebug()) {builder.addNetworkInterceptor(new WeexOkhttp3Interceptor());}return builder.build();}public void initClient(Context context) {OkHttpUtils.initClient(createClient(context, 0));}public void cancel(Object tag) {}//上面EventFetch get请求调用到这里这里是真正发起请求的地方最终通过okhttpUtil发送的请求。public void get(String mUrl, HashMapString, String params, HashMapString, String header,StringCallback stringCallback, Object tag, long timeout) {mUrl safeUrl(mUrl);if (mUrl null) {if (stringCallback ! null) {stringCallback.onError(null, new IrregularUrlException(url不合法), 0);}return;}if (header null) {header new HashMap();}setTimeout(timeout);//此处使用的是对okhttp进行封装的OkHttpUtils框架发送的get请求并通过stringCallback回调真正的请求结果。GetBuilder builder OkHttpUtils.get().url(mUrl).tag(tag).headers(header);generateParams(params, builder);builder.build().execute(stringCallback);}private void setTimeout(long timeout) {if (timeout ! 0) {OkHttpUtils.getInstance().updateHttpClient(createClient(BMWXEnvironment.mApplicationContext, timeout));}}private RequestBody createRequestBodyByMediaType(MapString, String header, String content) {if (header ! null !TextUtils.isEmpty(header.get(Content-Type))) {String s header.get(Content-Type);MediaType mediaType null;try {mediaType MediaType.parse(s);} catch (Exception e) {e.printStackTrace();}if (mediaType null) {mediaType MediaType.parse(DEFAULT_MEDIATYPE);}return RequestBody.create(mediaType, content);}return RequestBody.create(MediaType.parse(DEFAULT_MEDIATYPE), content);}private String safeUrl(String origin) {if (origin null) return null;Uri parse Uri.parse(origin);StringBuilder builder new StringBuilder();Uri requestHost Uri.parse(TextUtils.isEmpty(Api.BASE_URL) ? DEFAULT_HOST : Api.BASE_URL);if (TextUtils.isEmpty(parse.getScheme())) {builder.append(requestHost.getScheme());} else {builder.append(parse.getScheme());}builder.append(://);if (TextUtils.isEmpty(parse.getHost())) {builder.append(requestHost.getHost());} else {builder.append(parse.getHost());}if (parse.getPort() ! -1) {builder.append(:).append(parse.getPort());}if (!TextUtils.isEmpty(parse.getPath())) {builder.append(origin.substring(origin.indexOf(parse.getPath())));}String finalUrl builder.toString();return HttpUrl.parse(finalUrl) null ? null : builder.toString();}private void generateParams(MapString, String params, OkHttpRequestBuilder builder) {if (params null) {params new HashMap();}if (builder instanceof GetBuilder) {GetBuilder getBuilder (GetBuilder) builder;for (Map.EntryString, String entry : params.entrySet()) {getBuilder.addParams(entry.getKey().trim(), entry.getValue().trim());}}}/*** 组合返回给前端的Js 数据*/public UploadResultBean resultBean(int code, String message, ArrayListString arrayList) {UploadResultBean uploadResultBean new UploadResultBean();uploadResultBean.resCode code;uploadResultBean.msg message;uploadResultBean.setData(arrayList);return uploadResultBean;}
}
AxiosManager使用的是OkhttpUtils发起的http请求它对okhttpclient进行的一些配置和拦截。至此整个js端axios.fetch发起的调用分析结束。
总结
整个eros js端和原生功能封装的比较完整基本上是按照weex原生功能风格去扩展的。对于前端同学进行纯weex项目开发来说eros提供了一站式解决方案还是比原生weex开发方便很多。但是也有一些不足的地方比如说在js 端在非Vue实例中调用widget功能储存功能可能js里调用还是稍微有点不方便需要自己去扩展。还有提供的http模块可配置性和拦截器功能比原生js http框架弱很多对于复杂的js请求处理起来很别扭需要自己扩展等等android原生端实现模块功能切分的比较清晰不过感觉整个调用逻辑有点绕还有就是通过绝对路径Key去反射创建对象这个做法有隐患。当然能够在weex原生的基础上扩展出来这么多功能还是比较赞的很多地方还是值得学习的
后记
下次分析一下eros是如何在weex多页应用中插入js widget功能多页应用中如何在js端进行全局生命周期监听和全局配置处理。
更多专业前端知识请上
【猿2048】www.mk2048.com
