芸朵科技

wt-ui 移动端，web端的组件库

设计请求库包装器模式

特性按需加载：

• useFormData(request)(params)
• setHeader(request,{})(params)
• transferParamsToBody(request)(params)

基于vue-router的auth中间件模式

场景：登录拦截，以及补全资料等，在补全资料时，中间可能会有一系列填写资料流程（一到多个页面），比如补充收获地址，在点击支付时能触发，点击我的里面的地址管理也能触发，类似这种，多入口触发的流程，如果在各个触发入口处编写补充收获地址流程代码，那么将混乱不堪。

使用方式

// 新建一个补充收获地址的流程，并传入初始化的中间件
const sd = new authMiddleware({name:'supplement-address',[...addMiddlewares]})
// 在新建后，如果需要还可以手动添加额外的中间件，这可以让中间件更灵活
sd.add([...addMiddlewares])
// 开始流程，流程开始后，会自动执行中间件队列，在每个中间件中，调用next(params)方法，将会执行并传递参数到下一个中间件
sd.start({...})
// 如果是页面中间件，将会发生页面跳转，例如跳转到补充收获地址的页面，等待用户填写信息，填写完成后，调用调用next执行下一个中间件
sd.next(params)

添加中间件

中间件类型

• 页面中间件 执行到这个中间件时将会发生页面跳转
• 逻辑中间件 执行一段逻辑的中间件，本身并不会引起页面跳转

页面中间件

在内部发生发生了页面跳转的中间件叫页面中间件
页面中间件有如下两种形式创建：

// 字符串形式，内部会自动使用router.push方法进行跳转
ad.add('/pages/supplement/address')
// 函数形式，可以定制路由参数
ad.add((addMiddleware,next,params) => {
	// doing something ...
    router.push('/pages/supplement/address',query:params)
})

逻辑中间件

未发生页面跳转的叫逻辑中间件，逻辑中间必须在结尾处调用next方法，以自动进入下一个中间件，否者中间件流程将卡死在这里

• 在中间件中添加其他中间件（页面中间件、逻辑中间件均可）

ad.add((addMiddleware,next,param) => {
	// doing something ...
    addMiddleware([
      () => {
          ...
      },
      // 页面中间件
      '/pages/supplement/address'
    ])
     next(params)
})

• 在中间件中动态跳转

ad.add((addMiddleware,next,param) => {
	// doing something ...
    if( param.isXXX ){
    	router.back()
    } else if( params.redirectUrl ){
    	router.redirect(params.redirectUrl)
    } else if( params.router.replace ){
    	router.replace(params.path)
    } else if( params.path ){
    	router.push(params.path)
    } else {
    	next(params)
    }
})

• 在中间件中调用接口

ad.add(async (addMiddleware,next,param) => {
	// doing something ...
    const response = await fetch.get(***)
    if(response.error){
    	alert(response.errorMessage)
        return
    }
    next({...params,...response.data}) 
    // or router.push(params.path,query:{...params.query,...response.data})
})