feat: 优化 request 插件

packages/fes-plugin-request/src/template/cacheControl.js

@@ -0,0 +1,145 @@
+import {
+    genRequestKey, isObject, isString, isURLSearchParams, checkHttpRequestHasBody
+} from './helpers';
+/**
+ * 缓存实现的功能
+ * 1. 唯一定位一个请求（url, data | params, method）
+ *      其中请求参数根据请求方法使用其中一个就够了
+ *      一个请求同时包含 data | params 参数的设计本身不合理
+ *      不对这种情况进行兼容
+ * 2. 控制缓存内容的大小，localStorage 只有5M
+ * 3. 控制缓存时间
+ *      session(存在内存中)
+ *      expireTime 存在localStoreage 中
+ * 4. 成功的、且响应内容为json的请求进行缓存
+ */
+
+/**
+ * 配置数据
+ * type: 'ram' | 'sessionStorage' | 'localStorage'
+ * cacheTime: ''
+ */
+
+
+/**
+ * 缓存数据结构
+ * cache: {
+ *      url: 'url', // 缓存 url
+ *      data: data, // 数据
+ *      expire: '' // 缓存时间
+ * }
+ */
+
+/**
+ * 请求参数可以为如下类型
+ * - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
+ * - Browser only: FormData, File, Blob
+ * 只缓存参数类型为: string、plain object、URLSearchParams 或者无参数的 请求
+ */
+
+const CACHE_KEY_PREFIX = '__FES_REQUEST_CACHE:';
+const CACHE_TYPE = {
+    ram: 'ram',
+    session: 'sessionStorage',
+    local: 'localStorage'
+};
+
+const CACHE_DATA = new Map();
+
+function genInnerKey(key, cacheType) {
+    if (cacheType !== CACHE_TYPE.ram) {
+        return `${CACHE_KEY_PREFIX}${key}`;
+    }
+    return key;
+}
+
+function canCache(requestData) {
+    return isObject(requestData) || isString(requestData) || isURLSearchParams(requestData);
+}
+
+function setCacheData({
+    key,
+    cacheType,
+    data,
+    cacheTime = 1000 * 60 * 3
+}) {
+    const _key = genInnerKey(key, cacheType);
+    const currentCacheData = {
+        cacheType,
+        data,
+        cacheTime,
+        expire: Date.now() + cacheTime
+    };
+    if (cacheType !== CACHE_TYPE.ram) {
+        const cacheInstance = window[CACHE_TYPE[cacheType]];
+        try {
+            cacheInstance.setItem(_key, JSON.stringify(currentCacheData));
+        } catch (e) {
+            // setItem 出现异常，清理缓存
+            for (const item in cacheInstance) {
+                if (item.startsWith(CACHE_KEY_PREFIX) && Object.prototype.hasOwnProperty.call(cacheInstance, item)) {
+                    cacheInstance.removeItem(item);
+                }
+            }
+        }
+    } else {
+        CACHE_DATA.set(_key, currentCacheData);
+    }
+}
+
+function isExpire({ expire, cacheTime }) {
+    if (!cacheTime || expire >= Date.now()) {
+        return false;
+    }
+    return true;
+}
+
+function getCacheData({ key, cacheType = 'ram' }) {
+    const _key = genInnerKey(key, cacheType);
+    if (cacheType !== CACHE_TYPE.ram) {
+        const cacheInstance = window[CACHE_TYPE[cacheType]];
+        const text = cacheInstance.getItem(_key) || null;
+        try {
+            const currentCacheData = JSON.parse(text);
+            if (currentCacheData && !isExpire(currentCacheData)) {
+                return currentCacheData.data;
+            }
+            cacheInstance.removeItem(_key);
+            return null;
+        } catch (e) {
+            cacheInstance.removeItem(_key);
+            return null;
+        }
+    } else {
+        const currentCacheData = CACHE_DATA.get(_key);
+        if (currentCacheData && !isExpire(currentCacheData)) {
+            return currentCacheData.data;
+        }
+        CACHE_DATA.delete(_key);
+        return null;
+    }
+}
+
+export default (ctx, next) => {
+    const { config } = ctx;
+    let requestKey;
+    if (config.cache) {
+        const data = checkHttpRequestHasBody(config.method) ? config.data : config.params;
+        requestKey = genRequestKey(config.url, data, config.method);
+        if (canCache(data)) {
+            ctx.response = {
+                data: getCacheData({ key: requestKey, cacheType: config.cache.cacheType })
+            };
+            return;
+        }
+    }
+    next();
+
+    if (config.cache) {
+        setCacheData({
+            key: requestKey,
+            data: ctx.response.data,
+            ...config.cache
+        });
+    }
+};

packages/fes-plugin-request/src/template/paramsProcess.js

@@ -1,12 +1,11 @@
 import { checkHttpRequestHasBody, trimObj } from 'helpers';
 
-export default (instance) => {
-    instance.interceptors.request.use((config) => {
-        if (checkHttpRequestHasBody(config.method)) {
-            config.data = trimObj(config.data);
-        } else {
-            config.params = trimObj(config.params);
-        }
-        return config;
-    });
+export default (ctx, next) => {
+    const config = ctx.config;
+    if (checkHttpRequestHasBody(config.method)) {
+        config.data = trimObj(config.data);
+    } else {
+        config.params = trimObj(config.params);
+    }
+    next();
 };

packages/fes-plugin-request/src/template/request.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { ApplyPluginsType, plugin } from '@webank/fes';
+import scheduler from 'scheduler';
 import {
     checkHttpRequestHasBody,
     isFunction
@@ -28,6 +29,16 @@ function addResponseInterceptors(instance, interceptors) {
     addInterceptors(instance, interceptors, 'response');
 }
 
+function axiosMiddleware(context, next) {
+    context.instance.request(context.config).then((response) => {
+        context.response = response;
+    }).catch((error) => {
+        context.error = error;
+    }).finally(() => {
+        next();
+    });
+}
+
 function getRequestInstance() {
     const {
         responseDataAdaptor,
@@ -42,33 +53,36 @@ function getRequestInstance() {
         initialValue: {}
     });
 
-    const instance = axios.create(Object.assign({
+    const defaultConfig = Object.assign({
         timeout: 10000,
         withCredentials: true
-    }, otherConfigs));
+    }, otherConfigs);
+    const instance = axios.create(defaultConfig);
 
-    // eslint-disable-next-line
-    const dataField = REPLACE_DATA_FIELD;
-    addRequestInterceptors(requestInterceptors);
-    addResponseInterceptors(responseInterceptors);
+    addRequestInterceptors(instance, requestInterceptors);
+    addResponseInterceptors(instance, responseInterceptors);
 
-
-    paramsProcess(instance);
-    resDataAdaptor(instance, { responseDataAdaptor });
-    resErrorProcess(instance, { errorConfig, errorHandler });
-    setDataField(instance, dataField);
+    scheduler.use(paramsProcess);
+    scheduler.use(axiosMiddleware);
+    scheduler.use(resDataAdaptor);
+    scheduler.use(resErrorProcess);
+    scheduler.use(setDataField);
 
     return {
-        instance
+        context: {
+            instance,
+            defaultConfig,
+            dataField: REPLACE_DATA_FIELD, // eslint-disable-line
+            responseDataAdaptor,
+            errorConfig,
+            errorHandler
+        },
+        request: scheduler.compose()
     };
 }
 
-let currentRequestInstance = null;
-export const request = (url, data, options = {}) => {
-    if (!currentRequestInstance) {
-        const { instance } = getRequestInstance();
-        currentRequestInstance = instance;
-    }
+
+function userConfigHandler(url, data, options = {}) {
     options.url = url;
     options.method = (options.method || 'post').toUpperCase();
     if (checkHttpRequestHasBody(options.method)) {
@@ -76,5 +90,31 @@ export const request = (url, data, options = {}) => {
     } else {
         options.params = data;
     }
-    return currentRequestInstance.request(options);
+}
+
+let currentRequestInstance = null;
+
+function createContext(userConfig) {
+    return {
+        ...currentRequestInstance.context,
+        config: {
+            ...currentRequestInstance.context.defaultConfig,
+            ...userConfig
+        }
+    };
+}
+
+export const request = (url, data, options = {}) => {
+    if (!currentRequestInstance) {
+        currentRequestInstance = getRequestInstance();
+    }
+    const userConfig = userConfigHandler(url, data, options);
+    const context = createContext(userConfig);
+
+    return currentRequestInstance.request(context).then((ctx) => {
+        if (!ctx.error) {
+            return ctx.config.useResonse ? ctx.response : ctx.response.data;
+        }
+        return Promise.reject(ctx.error);
+    });
 };

packages/fes-plugin-request/src/template/resDataAdaptor.js

@@ -1,11 +1,8 @@
 import { isFunction, isObject, isString } from './helpers';
 
-export default (instance, { responseDataAdaptor }) => {
-    instance.interceptors.response.use((response) => {
-        // 响应内容可能是个文件流 or 普通文本
-        if (isFunction(responseDataAdaptor) && (isObject(response.data) || isString(response.data))) {
-            response.data = responseDataAdaptor(response.data);
-        }
-        return response;
-    });
+export default ({ response, responseDataAdaptor }, next) => {
+    if (isFunction(responseDataAdaptor) && (isObject(response.data) || isString(response.data))) {
+        response.data = responseDataAdaptor(response.data);
+    }
+    next();
 };

packages/fes-plugin-request/src/template/resErrorProcess.js

@@ -8,30 +8,22 @@ function resErrorProcess(error, customerErrorHandler) {
     }
 }
 
-export default (instance, { errorConfig, errorHandler }) => {
+
+export default ({
+    error,
+    errorConfig,
+    errorHandler,
+    response
+}, next) => {
     const _errorConfig = Object.assign({
-        401: {
-            showType: 9,
-            errorPage: '/login'
-        },
         403: '用户得到授权，但访问是禁止的'
     }, errorConfig);
 
-    instance.interceptors.response.use((response) => {
-        if (isObject(response.data) && response.data.code !== '0') {
-            resErrorProcess(_errorConfig[response.data.code] || response.data.msg || response.data.errorMessage || response.data.errorMsg || '服务异常', errorHandler);
-            return Promise.reject(response);
-        }
+    if (isObject(response.data) && response.data.code !== '0') {
+        resErrorProcess(_errorConfig[response.data.code] || response.data.msg || response.data.errorMessage || response.data.errorMsg || '服务异常', errorHandler);
+    } else if (error && error.response && _errorConfig[error.response.status]) {
+        resErrorProcess(_errorConfig[error.response.status], errorHandler);
+    }
 
-        return response;
-    }, (error) => {
-        if (error.response) {
-            // The request was made and the server responded with a status code
-            // that falls out of the range of 2xx
-            if (_errorConfig[error.response.status]) {
-                resErrorProcess(_errorConfig[error.response.status], errorHandler);
-            }
-        }
-        return Promise.reject(error);
-    });
+    next();
 };

packages/fes-plugin-request/src/template/scheduler.js

@@ -0,0 +1,33 @@
+
+class Scheduler {
+    constructor() {
+        this.middlewares = [];
+    }
+
+    use(fn) {
+        if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
+        this.middlewares.push(fn);
+        return this;
+    }
+
+    compose() {
+        return (context, next) => {
+            let index = -1;
+            const dispatch = (i) => {
+                if (i <= index) return Promise.reject(new Error('next() called multiple times'));
+                index = i;
+                let fn = this.middlewares[i];
+                if (index === this.middlewares.length) fn = next;
+                if (!fn) return Promise.resolve();
+                try {
+                    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
+                } catch (e) {
+                    return Promise.reject(e);
+                }
+            };
+            return dispatch(0);
+        };
+    }
+}
+
+export default Scheduler();

packages/fes-plugin-request/src/template/setDataField.js

@@ -1,10 +1,10 @@
 import { isObject } from './helpers';
 
-export default (instance, { dataField }) => {
-    instance.interceptors.response.use((response) => {
-        if (isObject(response.data) && dataField) {
-            return response.data[dataField];
-        }
-        return response;
-    });
+export default (ctx, next) => {
+    const { dataField, response } = ctx;
+    if (isObject(response.data) && dataField) {
+        ctx.response._rawData = response.data;
+        ctx.response.data = response.data[dataField];
+    }
+    next();
 };