ajax

• 描述： axios的封装实现了filter
• 创建人： lingtong
• 创建时间：2019年06月25日 16:14
• 仓库地址: [email protected]:fe-arch/knx-core.git

API

该库是axios的再封装，您可以在github上(https://github.com/axios/axios)找到详细的文档，下面只写扩展内容。

扩展内容

1. 扩展了错误处理，通过 @knx-core/ajax-error 将后端返回的值进行处理。并且把解析结果绑定到response.errMsg上
2. 扩展了POST请求的body参数序列化，当 headers['Content-Type'] === 'application/x-www-form-urlencoded' 时执行序列化
3. 扩展了Filter过滤器

过滤器的概念:

在某些业务场景：

1. 由于某些客观原因从后端拿到的数据前端需要一些处理才能使用
2. 由于某些不可抗力因素，由于后端的接口修改，导致需求的参数变化
3. 上述修改逻辑在多个地方重复，可以公用

在遇到这些问题的时候，之前你可能通过对多处组件的修改来得到期望的结果，现在有了一个更优雅的方法。

before:

请求 -> 拿到后端数据 -> 页面UI展示

after:

请求 -> Fitlers request -> 拿到后端数据 -> Filter response -> 页面UI展示

通过Filters的两个阶段拦截，你可以把处理逻辑从UI层分离

class CustomFilter extends Filter {
    request(config){
        //在这里可以修改config
        return super.request(config);
    }
    response(response){
        //在这里可以修改response
        return super.response(response);
    }
}

在上面是一个简单的Filter实现，你也可以只实现request或response。在两个阶段中你甚至可以通过Promise做一些异步的事情，比如请求另一个或几个接口等

你可以这样使用Filter

ajax({ url:'/', filter: CustomFilter });

也可以串联多个Filter

ajax({ url:'/', filter: [CustomFilter0,CustomFilter1,CustomFilter2] });

当多个Filter串联时，执行顺序为:

请求 -> CustomFilter0 request -> CustomFilter1 request -> CustomFilter2 request -> 拿到后端数据 -> CustomFilter0 response -> CustomFilter1 response -> CustomFilter2 response -> 页面UI展示

Filter的每个操作return 的值都允许是异步的你可以展现你充分的想象力，用Filter去处理差异性逻辑

Blog:

• 2019年06月25日 16:14：lingtong 创建组件