沐鳴註冊平台_JS中間件封裝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.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

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