前端中的接口聚合

時間  2021-01-13
標籤 前端 webpack ios git github web npm json axios api 欄目 設計模式 简体版
原文   原文鏈接

request-combo

這是一個前端簡易版接口聚合模塊，主要用於如下場景：前端

  • 一個支持參數合併的接口，在組件化或其餘場景下調用了不一樣參數的相同的接口，這時把這些調用合併成一個或多個接口再請求。

  • 避免發起相同的請求,某些狀況下發起了相同的請求，經收集處理後，實際只發起一個請求。可是不一樣的發起端的callback 都能獲得處理。webpack

    主要邏輯設計

  • 要知道接口的基本信息,包括但不限於 url、params、callback…
  • 既然要聚合，那麼得有一個收集接口的隊列
  • 每一個接口的隊列要有狀態，當一個新接口到來時，該接口的隊列可能還沒建立，可能正在收集，可能剛發完請求。
  • 要有接口隊列發起請求的條件，收集時間夠了或者收集長度夠了…
  • 有緩存機制，已獲取的數據暫時緩存起來

    API 設計

調用方法：requestCombo()
參數：ios

apiData: ApiData, 
params: object, 
callback: Function, 
request = axios, 
collectTime = 100, 
isCombo = true, 
errorHandle?: Function

ApiData 類型中包含如下內容：git

前端中的接口聚合

具體實現

import axios from 'axios';

interface ApiData {
    url: string;
    pack: Function;
    unpack: Function;
    maxComboNum?: number;
    requestMethod?: string;
}

/**
 * status: number
 * 0:init
 * 1:pending
 * 2:done
 * 
 * request
 * The api must be the same as axios
 */
const dataCache: object = {};
const busData: object = {};

export const requestCombo = (apiData: ApiData, params: object, callback?: Function, request = axios, collectTime = 100, isCombo = true, errorHandle?: Function) => {
    const { url, requestMethod = 'get', maxComboNum = 10, pack, unpack } = apiData;

    const method: string = requestMethod.toLocaleLowerCase();
    const cacheKey = `${url}_${method}_${JSON.stringify(params)}`;
    const busKey = `${url}_${method}`;

    if (!url) return;

    const sendRequest = async () => {
        clearTimeout(busData[busKey].timer);
        const paramList = busData[busKey].paramList;
        const paramObject = pack(paramList);

        busData[busKey] = null;
        try {
            const result = await applyRequest(url, paramObject, method, request);
            // 拆解，拆完要對應回去，所以要用 param 作key
            const obj = unpack(result, paramList) || {};
            Object.keys(obj).forEach((key) => {
                const dataNode = dataCache[cacheKey];
                if (!dataNode) {
                    errorHandle ? errorHandle('Data Unpack Error') : console.log('Data Unpack Error');
                } else {
                    dataNode.data = obj[key];
                    dataNode.status = 2;
                    dataNode.cbs.forEach((cb: Function) => {
                        cb(obj[key]);
                    });
                }
            });
        } catch (ex) {
            if (errorHandle) {
                errorHandle(ex);
                return;
            }
            throw ex;
        }
    };

    return new Promise((resolve, reject) => {
        if (!callback) callback = () => { }; //預處理接口返回數據
        const _callback = callback;
        callback = (json: any) => {
            const raw = _callback(json);
            if (raw && typeof raw.then === 'function') {//認爲是Promise
                raw.then((data: any) => {
                    resolve(data);
                }).catch((err: any) => { reject(err); }); //終結的promise鏈必須捕獲錯誤，不然丟失錯誤鏈
            } else {
                resolve(raw);
            }
        };

        if (dataCache[cacheKey]) {
            if (dataCache[cacheKey].status === 1) {
                dataCache[cacheKey].cbs.push(callback);
            } else if (dataCache[cacheKey].status === 2) {
                callback(dataCache[cacheKey].data);
            }
        } else {
            dataCache[cacheKey] = {
                status: 1,
                cbs: [],
                data: {}
            };
            if (!isCombo) {
                applyRequest(url, params, requestMethod, request).then((data: object) => {
                    dataCache[cacheKey].status = 2;
                    dataCache[cacheKey].data = data;
                    dataCache[cacheKey].cbs.forEach((cb: Function) => {
                        cb(data);
                    });
                    resolve(data);
                });
            } else {
                if (!busData[busKey]) {
                    busData[busKey] = {
                        paramList: [params],
                        url,
                        timer: setTimeout(sendRequest, collectTime)
                    };
                } else {
                    busData[busKey].paramList.push(params); // 加入參數隊列
                    if (busData[busKey].paramList.length >= maxComboNum) {
                        // 發起請求
                        sendRequest();
                    }
                }
            }
        }
    }).catch((ex) => {
        if (errorHandle) {
            errorHandle(ex);
            return;
        }
        throw ex;
    });
};

const applyRequest = async (url: string, params: object, requestMethod = 'get', request: any, ) => {
    if (requestMethod === 'get') {
        return request[requestMethod](url, { params });
    } else {
        return request[requestMethod](url, { ...params });
    }
};

詳見：https://github.com/LuckyWinty/ToolLibrary/tree/master/src/RequestCombogithub

Example

const ApiData = {
    getPrice: {
        url: '//test/prices',
        maxComboNum: 10,
        requestMethod: 'get',
        pack (paramList: object[]) {
            const skuids: string[] = [];
            paramList.forEach((p: any) => {
                if (p.skuids) {
                    skuids.push(p.skuids);
                }
            });
            const ret = {
                skuids: skuids.join(',')
            };

            console.log('合併後的價格參數', ret);
            return ret;
        },
        unpack: (data: any, paramList: object[]) => {
            if (data && data.data && length) {
                const resData = data.data || [];
                const ret = {};
                paramList.forEach((p: any) => {
                    const key = JSON.stringify(p);
                    resData.some((item: any, i: number) => {
                        const sku = item.sku;
                        if (sku === p.skuids) {
                            ret[key] = [data[i]];
                            return true;
                        }
                        return false;
                    });
                });
                console.log('價格拆解數據', ret);
                return ret;
            }
            return [];
        }
    }
};

const p1 = requestCombo(ApiData['getPrice'], { skuids: '11111' }, (data: any) => {
    console.log(data);
});
const p2 = requestCombo(ApiData['getPrice'], { skuids: '11112' }, (data: any) => {
    console.log(data);
});
const p3 = requestCombo(ApiData['getPrice'], { skuids: '11113' }, (data: any) => {
    console.log(data);
});
const data1 = await p1;
const data2 = await p2;
const data3 = await p3;

做爲獨立repo打包

這種狀況適合使用 webpack 來做爲打包器。咱們主要配置幾個點：web

  • 支持各類模式的導入(umd、ES6的export、export default導出)
  • 打包壓縮版用於生產環境，未壓縮版用於開發環境
  • 將項目名與入口文件的返回值綁定(script引入時能夠直接訪問項目名稱來訪問包)
    最後配置以下：
//webpack.config.js
    const TerserPlugin = require('terser-webpack-plugin');

    module.exports = {
        entry: {
            'RequestCombo': './src/index.js',
            'RequestCombo.min': './src/index.js'
        },
        output: {
            filename: '[name].js',
            library: 'RequestCombo',
            libraryTarget: 'umd',
            libraryExport: 'default'
        },
        mode: 'none',
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    include: /\.min\.js$/,
                })
            ]
        }
    }

在工具庫中，用 rollup 打包

這個跟 webpack 打包的目標是一致的。就是工具不一樣，配置稍有差別.npm

//爲展現方便，刪除了部分插件
const filesize = require('rollup-plugin-filesize')
const path = require('path')
const { terser } = require('rollup-plugin-terser')
const { name, version, author } = require('../package.json')

const componentName = process.env.COMPONENT
const componentType = process.env.COMPONENT_TYPE || 'js'

const banner = `${'/*!\n* '}${name}.js v${version}\n`
  + ` * (c) 2018-${new Date().getFullYear()} ${author}\n`
  + ' * Released under the MIT License.\n'
  + ' */'

module.exports = [
  {
    input: path.resolve(__dirname, `../src/${componentName}/src/index.${componentType}`),
    output: [
      {
        file: path.resolve(
          __dirname,
          `../src/${componentName}/dist/${componentName}.min.js`
        ),
        format: 'umd',
        name,
        banner,
        sourcemap: true,
      }
    ],
    plugins: [terser(), filesize()],
  },
  {
    input: path.resolve(__dirname, `../src/${componentName}/src/index.${componentType}`),
    output: {
      file: path.resolve(
        __dirname,
        `../src/${componentName}/dist/${componentName}.min.esm.js`
      ),
      format: 'esm',
      banner,
    },
    plugins: [terser(), filesize()],
  },
  {
    input: path.resolve(__dirname, `../src/${componentName}/src/index.${componentType}`),
    output: [
      {
        file: path.resolve(
          __dirname,
          `../src/${componentName}/dist/${componentName}.js`
        ),
        format: 'umd',
        name,
        banner,
      }
    ],
    plugins: [],
  }
]

詳見：https://github.com/LuckyWinty/ToolLibraryjson

發佈到 npm

相關命令

添加用戶: npm adduseraxios

登錄: npm loginapi

發佈版本: npm publish

升級版本：

  • 升級補丁版本號: npm version patch
  • 升級小版本號: npm version minor

  • 升級大版本號: npm version major

    最後

  • 瞭解更多內容，歡迎關注個人blog, 給我個star～
  • 以爲內容有幫助能夠關注下個人公衆號 「前端Q」，一塊兒學習成長～～
    前端中的接口聚合
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程