前后端分离开发的模式已经很常见了,接口调用的库其实已经有很多了,比如axios、fetch(h5自带的)、request等,这些都是封装的比较好的一些库了,但是每个公司的接口标准都不一样的,所以我们应该基于自己的接口规范进行二次的封装,这样子才能更大的提升开发效率。

我封装这个Class是没有基于任何一个请求库的,只是封装的一个请求流程,采用中间件去写这个流程。如: 请求开始之前要设置一些header、发起请求、处理响应结果、处理错误响应结果等等

中间件的代码

class RequestMiddle { constructor() { this.$middlewares = [] this.$events = {} } // 注册中间件 use () { const args = Array.from(arguments) args.forEach(item => { if (typeof item === 'function') { this.$middlewares.push(item) } }) } /** * 每个中间件只有两个形参 第一是传进来的参数 第二个是调用下一个中间件的函数 * 中间件的执行顺序是根据你注册中间件的顺序来去调用的 */ next (params) { let index = 0 function next(params) { if (index <= this.$middlewares.length - 1) { var ware = this.$middlewares[index] index++ ware.call(this, params, next.bind(this)) } } next.call(this, params) } /** * 注册事件 * @param {String} name 事件名称 * @param {Function (params)} callback 回调函数 */ on (name, callback) { if (typeof callback === 'function') { this.$events[name] = callback } else { throw '事件回调必须为函数' } } /** * 发射(触发)事件 * @param {String} name 事件名称 * @param {Any} params 回调参数 */ emit (name, params) { if (this.$events[name]) { let callback = this.$events[name] callback.call(this, params) } else { throw '没有注册这个事件' } } send (params) { this.next(params) } }

下面是我写的一个小Demo:

// request.js const requestMiddle = new RequestMiddle() // 实例化一个中间件 // 处理请求之前 requestMiddle.use(function (params, next) { // 处理请求头 params.header = {'Content-Type': 'application/json; charset=utf-8'} next(params) }) // 也可以先定义函数,在注册中间件 requestMiddle.use(handleRequest, handleResponent) // 发送请求 function handleRequest (params, next) { fetch(params.api).then(res => res.json()).then(res => { params.responentData = res // 触发请求结束成功的钩子 this.emit('responentSuccess', params) next(params) }) } // 处理响应结果 function handleResponent (params, next) { const {code, data, message} = params.responentData switch (code) { case 200: params.promise.resolve(data) break case 401: // 处理没有登录的逻辑 params.promise.reject(data) break default: params.promise.reject(data) alert('哈哈哈哈哈') break } } // 请求成功的回调函数 requestMiddle.on('responentSuccess', params => { // 在这里可以做下请求成功的一些处理,比如全局loading什么的 console.log(params, '请求成功') }) export default function (api params={}) { return new Promise((resolve, reject) => { params.promise = {resolve, reject} params.api = api // 开始执行中间件 requestMiddle.send(params) }) }

用上面封装的js调用下接口

// 引入上面封装的request库 import request from './request.js' request('/api/page/category/index').then(res => { console.log(res, '返回结果') })

当然,我封装的这个中间件的类,也可以用到别的地方,比如你处理一些非常复杂的一个业务模块,采用中间件我觉得是一个不错的idea。

完~~~

我们评论区见吧