JS中间件封装api调用处理过程

时间: 2019-12-31阅读: 321标签: api

秉持低耦合的观念,拆分各个功能函数,做到清晰控制,数据单向流转


定义中间件对象

class Middleware {
    constructor({ core, params }) {
        // 传入的封装axios
        this.core = core;
        // 传入的axios参数
        this.params = params;
        // 存放链式调用的中间件函数
        this.cache = [];
    }
    use(fn) {
        if (typeof fn !== "function") {
            throw "middleware must be a function";
        }
        this.cache.push(fn);
        return this;
    }
    next(data) {
        if (this.middlewares && this.middlewares.length > 0) {
            var ware = this.middlewares.shift();
            ware.call(this, this.next.bind(this), data);
        }
        return data;
    }
    async go() {
        // 请求获取数据,以备后序程序使用
        let result = await this.core(this.params);
        //复制函数,待执行
        this.middlewares = this.cache.map(function(fn) {
            return fn;
        });
        // 向后传递参数,中间插件模型处理流程数据
        this.next(result);
    }
}

使用

// 导入参数
var onion = new Middleware({core: request, params});
onion.use(function (next, data) {
    console.log(1);
    console.log(data);
    // 向后传递数据
    next(data);
    console.log("1结束");
});
onion.use(function (next, data) {
    console.log(2);
    console.log(data);
    // 向后传递数据
    next(data);
    console.log("2结束");
});
onion.use(function (next, data) {
    console.log(3);
    console.log(data);
    console.log("3结束");
});
// 上一步没有调用next,后面的函数都不执行
onion.use(function (next, data) {
    console.log(4);
    next(data);
    console.log("4结束");
});
onion.go();
// 1
// {a: 1, b: 2}
// 2
// {a: 1, b: 2, c: 3}
// 3
// {a: 1, b: 2, c: 3, d: 4}
// 3结束
// 2结束
// 1结束

配合API接口数据返回后的操作函数

function handleStatus(next, res) {
    console.log(res);
    next(res);
}
function handleAuth(next, res) {
    console.log(res);
    next(res);
}
function handlePosition(next, res) {
    console.log(res);
    next(res);
}
function handleForbiddenList(next, res) {
    console.log(res);
    next(res);
}
function handleLoad(next, res) {
    console.log(res);
    next(res);
}

通过中间件以此注册

// 导入参数
var onion = new Middleware({core: request, params});
onion.use(handleStatus);
onion.use(handleAuth);
onion.use(handlePosition);
onion.use(handleForbiddenList);
onion.use(handleLoad);
onion.go();
// 函数里面可以用异步函数,获取到这个流程处理完的值
// let res = await onion.go();
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/10024

API 接口设计规范

这篇文章分享 API 接口设计规范,目的是提供给研发人员做参考。规范是死的,人是活的,希望自己定的规范,不要被打脸。url?后面的参数,存放请求接口的参数数据。

使用 JS 来动态操作 css ,你知道几种方法?

JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API,还有一组不太为人所知的 CSS API

docker提供api访问

环境centos,添加deamon.json后,dockerd命令可以启动docker,这时请求 127.0.0.1:2375 可以正常访问,使用systemctl无法启动docker的情况.无法启动docker:查看当前的docker配置

使用本地json-server服务,创建简单的本地api数据

近期在学习 Vue 框架,在学习过程中,发现了一个和 mockjs 类似的第三方库: json-server。它不仅可以模拟出完美的接口数据,还可以修改请求的类型来修改本地的数据,是一个非常不错的库,所以分享记录一下使用心得。

scrollIntoView 与 scrollIntoViewIfNeeded API 介绍

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内

H5+ API 设置手机状态栏颜色以及沉浸式状态栏

通过方法判断是否支持沉浸式,如果支持,拿到高度后,在页面中通过设置样式,为状态栏留出相应的位置,顺便说一下,沉浸式是应用级的,不能动态设置

JavaScript的API设计原则

Js的API设计原则总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。

用于现代JavaScript的Observer API

Observer API(观察者API)释放了Web隐藏的超能力,以创建真正的响应式体验,从懒加载关键内容到非侵入式性能监控。在检测变化方面非常方便,可以用来创建响应式应用。

JSON Web 令牌(JWT)是如何保护 API 的?

你可以已经听说过 JSON Web Token (JWT) 是目前用于保护 API 的最新技术。与大多数安全主题一样,如果你打算使用它,那很有必要去了解它的工作原理(一定程度上)。问题在于,对 JWT 的大多数解释都是技术性的,这一点让人很头疼。

在 Node.js 上运行 Flutter Web 应用和 API

大量的跨平台应用开发框架,使你可以编写一次代码,然后在 Android,iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架,例如 Ionic,Xamarin 和 React Native。另一个相对较新的框架是 Flutter

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!