Feat/qs cache (#74)

* feat: use 'qs' module instead of 'query-string' to dealwith pack problem

* feat: add 'validateCache' for cache strategy

README.md

@@ -225,6 +225,7 @@ More umi-request cases can see [antd-pro](https://github.com/umijs/ant-design-pr
 | suffix | suffix, such as some scenes api need to be unified .json | string | -- |
 | credentials | fetch request with cookies | string | -- | credentials: 'same-origin' |
 | useCache | Whether to use caching (only support browser environment) | boolean | -- | false |
+| validateCache | cache strategy function | (url, options) => boolean | -- | only get request to cache |
 | ttl | Cache duration, 0 is not expired | number | -- | 60000 |
 | maxCache | Maximum number of caches | number | -- | 0(Infinity) |
 | requestType | post request data type | string | json , form | json |
@@ -299,7 +300,7 @@ The other parameters of fetch are valid. See [fetch documentation](https://githu
   credentials: 'same-origin', // default
 
   // ’useCache‘ The GET request would be cache in ttl milliseconds when 'useCache' is true.
-  // The cache key would be 'url + params'.
+  // The cache key would be 'url + params + method'.
   useCache: false, // default
 
   // 'ttl' cache duration（milliseconds），0 is infinity
@@ -308,6 +309,11 @@ The other parameters of fetch are valid. See [fetch documentation](https://githu
   // 'maxCache' are the max number of requests to be cached, 0 means infinity.
   maxCache: 0,
 
+  // According to http protocal, request of GET used to get data from server, it's necessary to cache response data when server data update not frequently. We provide 'validateCache'
+  // for some cases that need to cache data with other method reqeust.
+  validateCache: (url, options) => { return options.method.toLowerCase() === 'get' },
+
+
   // 'requestType' umi-request will add headers and body according to the 'requestType' when the type of data is object or array.
   // 1. requestType === 'json' :(default )
   // options.headers = {

README_zh-CN.md

@@ -231,8 +231,9 @@ umi-request 可以进行一层简单封装后再使用, 可参考 [antd-pro](htt
 | timeout | 超时时长, 默认毫秒, 写操作慎用  | number | -- | -- |
 | prefix | 前缀, 一般用于覆盖统一设置的prefix | string | -- | -- |
 | suffix | 后缀, 比如某些场景 api 需要统一加 .json  | string | -- | -- |
-| credentials | fetch 请求包含 cookies 信息 | object | -- | credentials: 'same-origin' |
+| credentials | fetch 请求包含 cookies 信息 | string | -- | credentials: 'same-origin' |
 | useCache | 是否使用缓存（仅支持浏览器客户端） | boolean | -- | false |
+| validateCache | 缓存策略函数 | (url, options) => boolean | -- | 默认 get 请求做缓存 |
 | ttl | 缓存时长, 0 为不过期 | number | -- | 60000 |
 | maxCache | 最大缓存数 | number | -- | 无限 |
 | requestType | post请求时数据类型 | string | json , form | json |
@@ -299,7 +300,7 @@ fetch原其他参数有效, 详见[fetch文档](https://github.github.io/fetch/)
   // 要改为确保浏览器不在请求中包含凭据，请使用credentials: 'omit'
   credentials: 'same-origin', // default
 
-  // ’useCache‘ 是否使用缓存，当值为 true 时，GET 请求在 ttl 毫秒内将被缓存，缓存策略唯一 key 为 url + params 组合
+  // ’useCache‘ 是否使用缓存，当值为 true 时，GET 请求在 ttl 毫秒内将被缓存，缓存策略唯一 key 为 url + params + method 组合
   useCache: false, // default
 
   // ’ttl‘ 缓存时长（毫秒）， 0 为不过期
@@ -308,6 +309,9 @@ fetch原其他参数有效, 详见[fetch文档](https://github.github.io/fetch/)
   // 'maxCache' 最大缓存数， 0 为无限制
   maxCache: 0,
 
+  // 根据协议规范， GET 请求用于获取、查询服务端数据，在数据更新频率不频繁的情况下做必要的缓存能减少服务端的压力，因为缓存策略是默认对 GET 请求做缓存，但对于一些特殊场景需要缓存其他类型请求的响应数据时，我们提供 validateCache 供用户自定义何时需要进行缓存， key 依旧为 url + params + method
+  validateCache: (url, options) => { return options.method.toLowerCase() === 'get' },
+
   // 'requestType' 当 data 为对象或者数组时， umi-request 会根据 requestType 动态添加 headers 和设置 body（可传入 headers 覆盖 Accept 和 Content-Type 头部属性）:
   // 1. requestType === 'json' 时, (默认为 json )
   // options.headers = {
@@ -452,7 +456,8 @@ request('/api/v1/xxx')
 
 
 ## 中间件
-类 koa 的洋葱机制，让开发者优雅地做请求前后的增强处理，支持创建实例、全局、内核中间件。
+
+类 koa 的洋葱机制，让开发者优雅地做请求前后的增强处理，支持创建实例、全局、内核中间件。
 
 **实例中间件（默认）** ：request.use(fn) 不同实例创建的中间件相互独立不影响;
 

package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "isomorphic-fetch": "^2.2.1",
-    "query-string": "^6.0.0"
+    "qs": "^6.9.1"
   },
   "files": [
     "dist/",

src/middleware/fetch.js

@@ -1,15 +1,33 @@
 import 'isomorphic-fetch';
 import { timeout2Throw, cancel2Throw, getEnv } from '../utils';
 
+// 是否已经警告过
+let warnedCoreType = false;
+
+// 默认缓存判断，开放缓存判断给非 get 请求使用
+function __defaultValidateCache(url, options) {
+  const { method = 'get' } = options;
+  return method.toLowerCase() === 'get';
+}
+
 export default function fetchMiddleware(ctx, next) {
   if (!ctx) return next();
   const { req: { options = {}, url = '' } = {}, cache, responseInterceptors } = ctx;
-  const { timeout = 0, __umiRequestCoreType__ = 'normal', useCache = false, method = 'get', params, ttl } = options;
+  const {
+    timeout = 0,
+    __umiRequestCoreType__ = 'normal',
+    useCache = false,
+    method = 'get',
+    params,
+    ttl,
+    validateCache = __defaultValidateCache,
+  } = options;
 
   if (__umiRequestCoreType__ !== 'normal') {
-    if (process && process.env && process.env.NODE_ENV === 'development') {
+    if (process && process.env && process.env.NODE_ENV === 'development' && warnedCoreType === false) {
+      warnedCoreType = true;
       console.warn(
-        '__umiRequestCoreType__ is a internal property that use in umi-request, change its value would affect the behavior of request! It only use when you want to extend the request core.'
+        '__umiRequestCoreType__ is a internal property that use in umi-request, change its value would affect the behavior of request! It only use when you want to extend or use request core.'
       );
     }
     return next();
@@ -23,11 +41,13 @@ export default function fetchMiddleware(ctx, next) {
 
   // 从缓存池检查是否有缓存数据
   const isBrowser = getEnv() === 'BROWSER';
-  const needCache = method.toLowerCase() === 'get' && useCache && isBrowser;
+  const needCache = validateCache(url, options) && useCache && isBrowser;
+  console.log('needCache:', needCache, url);
   if (needCache) {
     let responseCache = cache.get({
       url,
       params,
+      method,
     });
     if (responseCache) {
       responseCache = responseCache.clone();
@@ -56,7 +76,7 @@ export default function fetchMiddleware(ctx, next) {
       if (res.status === 200) {
         const copy = res.clone();
         copy.useCache = true;
-        cache.set({ url, params }, copy, ttl);
+        cache.set({ url, params, method }, copy, ttl);
       }
     }
 

src/middleware/simpleGet.js

@@ -1,4 +1,4 @@
-import { stringify } from 'query-string';
+import { stringify } from 'qs';
 import { isArray, isURLSearchParams, forEach2ObjArr, isObject, isDate } from '../utils';
 
 export function paramsSerialize(params, paramsSerializer) {
@@ -20,7 +20,8 @@ export function paramsSerialize(params, paramsSerializer) {
             jsonStringifiedParams.push(isObject(item) ? JSON.stringify(item) : item);
           }
         });
-        serializedParams = stringify(jsonStringifiedParams);
+        // a: [1,2,3] => a=1&a=2&a=3
+        serializedParams = stringify(jsonStringifiedParams, { arrayFormat: 'repeat', strictNullHandling: true });
       } else {
         jsonStringifiedParams = {};
         forEach2ObjArr(params, function(value, key) {
@@ -36,7 +37,7 @@ export function paramsSerialize(params, paramsSerializer) {
           }
           jsonStringifiedParams[key] = jsonStringifiedValue;
         });
-        const tmp = stringify(jsonStringifiedParams);
+        const tmp = stringify(jsonStringifiedParams, { arrayFormat: 'repeat', strictNullHandling: true });
         serializedParams = tmp;
       }
     }

src/middleware/simplePost.js

@@ -1,4 +1,4 @@
-import { stringify } from 'query-string';
+import { stringify } from 'qs';
 
 // 对请求参数做处理，实现 query 简化、 post 简化
 export default function simplePostMiddleware(ctx, next) {

src/utils.js

@@ -2,7 +2,7 @@
  * 实现一个简单的Map cache, 稍后可以挪到 utils中, 提供session local map三种前端cache方式.
  * 1. 可直接存储对象   2. 内存无5M限制   3.缺点是刷新就没了, 看反馈后期完善.
  */
-import { parse } from 'query-string';
+import { parse } from 'qs';
 
 export class MapCache {
   constructor(options) {
@@ -172,7 +172,7 @@ export function forEach2ObjArr(target, callback) {
 
 export function getParamObject(val) {
   if (isURLSearchParams(val)) {
-    return parse(val.toString());
+    return parse(val.toString(), { strictNullHandling: true });
   }
   if (typeof val === 'string') {
     return [val];

test/fetch.test.js

@@ -96,7 +96,7 @@ describe('timeout', () => {
       await fetch('/api/test', { __umiRequestCoreType__: 'other' });
       expect(console.warn.mock.calls.length).toBe(1);
       expect(console.warn.mock.calls[0][0]).toBe(
-        '__umiRequestCoreType__ is a internal property that use in umi-request, change its value would affect the behavior of request! It only use when you want to extend the request core.'
+        '__umiRequestCoreType__ is a internal property that use in umi-request, change its value would affect the behavior of request! It only use when you want to extend or use request core.'
       );
       process.env.NODE_ENV = 'test';
       done();

test/index.test.js

@@ -318,6 +318,37 @@ describe('test fetch:', () => {
     expect(response.data.defaultParams).toBe('true');
   }, 10000);
 
+  it('test validate cache', async () => {
+    server.post('/test/validate/cache', (req, res) => {
+      writeData(req.query, res);
+    });
+    server.get('/test/validate/cache', (req, res) => {
+      writeData(req.query, res);
+    });
+    const extendRequest = extend({
+      maxCache: 2,
+      prefix: server.url,
+      headers: { Connection: 'keep-alive' },
+      params: { defaultParams: true },
+      validateCache: (url, options) => {
+        const { method = 'get' } = options;
+        if (method.toLowerCase() === 'post') {
+          return true;
+        }
+        return false;
+      },
+      getResponse: true,
+      useCache: true,
+    });
+    let response = await extendRequest('/test/validate/cache', { method: 'post' });
+    response = await extendRequest('/test/validate/cache', { method: 'post' });
+
+    expect(response.response.useCache).toBe(true);
+
+    response = await extendRequest('/test/validate/cache', { method: 'get' });
+    expect(response.response.useCache).toBe(false);
+  });
+
   it('test extends', async () => {
     server.get('/test/method', (req, res) => {
       writeData({ method: req.method }, res);

test/interceptor.test.js

@@ -201,4 +201,26 @@ describe('interceptor', () => {
     expect(data.promiseFoo).toBe('promiseFoo');
     done();
   });
+
+  // reject in interceptor
+  it('throw error in response interceptor', async done => {
+    server.post('/test/reject/interceptor', (req, res) => {
+      writeData(req.body, res);
+    });
+
+    request.interceptors.response.use((response, options) => {
+      const { status, url } = response;
+      console.log('status', status, url);
+      if (status === 200 && url.indexOf('/test/reject/interceptor')) {
+        throw Error('reject when response is 200 status');
+      }
+    });
+
+    try {
+      const data = await request(prefix('/test/reject/interceptor'), { method: 'post' });
+    } catch (e) {
+      expect(e.message).toBe('reject when response is 200 status');
+      done();
+    }
+  });
 });

types/index.d.ts

@@ -40,6 +40,7 @@ export interface RequestOptionsInit extends RequestInit {
   parseResponse?: boolean;
   cancelToken?: CancelToken;
   getResponse?: boolean;
+  validateCache?: (url: string, options: RequestOptionsInit) => boolean;
 }
 
 export interface RequestOptionsWithoutResponse extends RequestOptionsInit {