BUZ-Requester请求管理

Requester -- 请求管理

请求管理，为项目提供接口访问，默认提供一个ajax请求器，采用axios进行封装，框架提供更改请求器，并可以根据不同请求参数使用 不同的请求触发器进行触发。

使用方式

App.request

应用池在初始化时，会将request方法绑定到App中，作为使用入口。

1 2 3 4

App.request(url,{     data:{},     ... },View);

View.request

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Buz.View({     onShow:function(){         this.request(url,{             data:{},             ...         });           //等同于           App.request(url,{             data:{},             ...         },this);     } });

Requester默认提供两种使用方式，两种区别在于是否有第三个参数：View(触发视图组件)。 方法返回Promise对象，可使用then、catch、all、race方法进行相关操作。 不了解ES6的Promise同学建议先去了解下。

参数说明

第一个参数为URL-请求路径，第三个参数为当前视图组件，接下来我们详细介绍下第二个参数

参数名	作用	类型	默认值	备注
method	请求类型	String	post	具体参考所依赖的底层请求触发器
data	请求参数	Object
cache	是否要记录缓存	Boolean	false	若设置为记录缓存，在第一次请求成功后才会记录请求数据，并在 以后的请求中使用缓存作为值进行返回，不再访问服务器
cacheId	缓存标识	String		缓存记录标识=url+|+cacheId
cancelWhenRouting	路由跳转时是否取消请求	Boolean	true	当路由发生改变时是否要清除当前未完成的请求，所设置为false，则永远不会被取消。

Requester-初始化

Requester在应用池初始化时进行挂载，并传入requestOption进行全局配置

requestOption-配置参数

参数名	作用	类型	默认值	备注
statusDict	自定义statusMessage	Object
getHandler	自定义获取请求触发器	Function		第一个参数为当前传入配置参数，后面依次为当前注入的触发器。 高级用法，请详见扩展请求触发器
resultTrasnform	自定义结果转换方法	Function		用于全局转换服务器相应数据

resultTrasnform

对于成熟的项目而言，服务器相应数据通常分为响应报文头、响应报文数据，通过该方法可以 根据项目自身需要进行相应的逻辑判断，执行成功/失败。例如下面这个例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

new Buz.Application({     requestOption:{         resultTrasnform:function(response, resolve, reject){             //response -- 服务器原始相应数据             //resolve -- 成功执行逻辑             //reject -- 错误执行逻辑               if(response.rspHead.state === 'success'){                 resolve(response);             }             else{                 reject(response.rspHead.state,response.rspHead.message);             }         }     },     ... }).start();

resolve成功逻辑执行方法，需要传入转换后的服务器数据；reject错误逻辑执行方法，需要传入错误状态和错误信息两个参数。

公开方法

由于Requester在应用池初始化时进行挂载，调用方法为：App.requester.方法名

方法名	作用	参数	备注
addHandler	添加请求触发器	触发器	参考：扩展请求触发器
request	请求接口		请参考本文第一节内容
cancelRequests	取消所有请求的回调函数	forceCancelAll 是否全部取消	若forceCancelAll=false则只取消cancelWhenRouting=true的请求， 若forceCancelAll=true，则取消所有未完成的请求。

Requester在初始化时，就已经对监听Router的before事件， 并在路由发生变化时，执行cancelRequests(false)；不需要再进行相应的扩展。

事件

事件名称	作用	参数	备注
before	请求开始前触发	当前请求配置信息
after	请求结束后	当前请求配置信息
error	请求发生异常时触发	{ code:错误码, settings:当前请求配置信息, message:错误信息 }	除请求链接错误外，业务逻辑错误也会触发，具体参考resultTrasnform配置参数。 若事件返回false时，则终止触发Promise的reject，不会向外层使用者响应，一般 在错误时跳转登录等特殊需求下。

提示：可以通过监听before和after事件实现请求等待效果。

扩展请求触发器

请求管理默认提供一种基于axios的ajax请求触发器，基本满足常用的业务需求， 若项目有更复杂的要求，可根据需要自行扩展，接下来我们先了解下BaseRequester

BaseRequester - 请求触发器基类

请求接口类，用于规范底层处理类，所有触发器必须继承与BaseRequester类，并且必须实现send方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/** *  作者：张传辉 *  功能名称：请求接口类，用于规范底层处理类 *  描述信息：所有方法必须进行实现 *      对外不输出Promise对象，统一由Requester统一创建并管理Promise */ class BaseRequester {     /**     * 参数转换方法     * @param {Object} option 参数     */     transformData(url, option = {}) { return option; }     /** 请求发起者 --必须重写     *  @param {Object} config 配置参数-请参考当前项目请求器参数说明     *  @param {Function} callBack 回调处理集     *  @return {Function} Cancel取消处理     */     send(config, callBack) { } }   export default BaseRequester;

基类提供两个扩展方法，其中send是发起请求的执行入口，必须实现，transformData 为参数转换方法，由于不同的底层实现参数规范可能不同，通过此方法可以实现对外参数一致性，对底层参数差异化。

扩展实践

接下来我们通过一个实践代码来了解下具体运行逻辑，业务要求：针对某些特定的url做差异化，这些特定url请求， 不请求服务器，而是请求虚拟报文（.js）

创建触发器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

class RequestByMock extends BaseRequester {     /** 请求发起者      *  @param {Object} config 配置参数-请参考当前项目请求器参数说明      *  @param {Function} callBack 回调处理集      *  @return {Function} Cancel取消处理      */     send(config, callBack) {           let canceled = false;           import(`~/mock/${url}.js`)             .then(function (response) {                 if (canceled) return;                   callBack('connect', response);             })             .catch(function (error) {                 if (canceled) return;                   callBack('error');             });             return function () {             canceled = true;         }     } }   export default RequestByMock;

在应用池初始化进行注入

1 2 3 4 5 6

import RequestByMock from './plugins/requster/RequestByMock'; new Buz.Application(...);   App.requester.addHander(RequestByMock);   App.start();

设置分支逻辑

1 2 3 4 5 6 7 8 9 10 11 12 13

App.new Buz.Application({     requestOption:{         getHandler:function(settings,requesterByAjax,requsterByMock){             if(settings.url ==='xxxx'){                 return requsterByMock;             }             else{                 return requesterByAjax;             }         }     },     ... }).start();

 

https://github.com/ZhangChuanHui/BUZ