feat(axios): close #32, support FormData type params (#35)

.eslintrc.js

@@ -8,5 +8,6 @@ module.exports = {
     },
     globals: {
         wx: true,
+        FormData: true,
     },
 }

docs/.vuepress/config.js

@@ -47,6 +47,7 @@ module.exports = {
                         'middleware',
                         'mock',
                         'export-utils',
+                        'form-data',
                         '../config/',
                     ],
                 },

docs/config/common.md

@@ -49,7 +49,7 @@ export default {
 ```
 
 ## reqType 请求使用库类型
-即用哪个库发起请求目前支持：jsonp、axios，不填则使用默认配置。
+即用哪个库发起请求目前支持：jsonp、axios、wx，不填则使用默认配置中的 reqType。
 
 ```js
 export default {

docs/config/default.md

@@ -18,7 +18,7 @@ new TuaApi({
 例如 `https://example.com/api/`
 
 ## reqType 请求类型
-即在 web 端使用哪个库发起请求目前支持：jsonp、axios，不填默认使用 axios。（小程序端没得选...）
+即使用哪个库发起请求目前支持：jsonp、axios、wx，不填默认使用 axios。
 
 ## middleware 中间件函数数组
 【所有】请求都会调用的中间件函数数组！适合添加一些通用逻辑，例如接口上报。

docs/guide/form-data.md

@@ -0,0 +1,28 @@
+# FormData <Badge text="1.3.0+"/>
+## 发送二进制数据
+日常使用中，除了简单的字符串参数以外，有时也会遇到需要发送二进制数据的场景，例如上传文件。
+
+在旧版的 `tua-api` 中若是遇到这种请求，也能发送但比较繁琐。
+
+```js
+const formData = new FormData()
+
+imgUploadApi.userUpload(null, {
+    reqFnParams: { reqParams: formData },
+    axiosOptions: { transformRequest: null },
+})
+```
+
+如上例所示，借助第二个参数[运行时配置](../config/runtime.md)设置了：数据、 `transformRequest`。
+
+而在新版本的 `tua-api` 中，只要这么调用即可：
+
+```js
+const formData = new FormData()
+
+imgUploadApi.userUpload(formData)
+```
+
+实现原理是 `tua-api` 在底层判断出接收的接口参数是 `FormData` 类型的数据，自动设置了 `transformRequest`。
+
+> 小程序端暂时建议使用原生的 `wx.uploadFile`。

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tua-api",
-    "version": "1.2.1",
+    "version": "1.3.0",
     "description": "🏗 A common tool helps converting configs to api functions",
     "main": "dist/TuaApi.cjs.js",
     "module": "dist/TuaApi.esm.js",
@@ -58,6 +58,7 @@
     },
     "eslintIgnore": [
         "dist/*",
+        "!.eslintrc.js",
         "package.json"
     ],
     "dependencies": {

src/adapters/axios.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 import { DEFAULT_HEADER } from '../constants'
-import { logger, getParamStrFromObj } from '../utils'
+import { logger, isFormData, getParamStrFromObj } from '../utils'
 
 // 获取使用 axios 发起请求后的 promise 对象
 export const getAxiosPromise = ({
@@ -14,11 +14,15 @@ export const getAxiosPromise = ({
     transformRequest = [getParamStrFromObj],
     ...rest
 }) => {
+    const isFD = isFormData(data)
+
     logger.log(`Req Url: ${url}`)
-    if (data && Object.keys(data).length) {
+    if (data && (Object.keys(data).length || isFD)) {
         logger.log(`Req Data:`, data)
     }
 
+    transformRequest = isFD ? null : transformRequest
+
     return axios({
         url,
         data,

src/middlewareFns.js

@@ -1,5 +1,6 @@
 import { ERROR_STRINGS } from './constants'
 import {
+    isFormData,
     checkArrayParams,
     getParamStrFromObj,
     getDefaultParamObj,
@@ -64,6 +65,12 @@ const formatReqParamsMiddleware = (ctx, next) => {
         throw TypeError(ERROR_STRINGS.argsType)
     }
 
+    if (isFormData(args)) {
+        ctx.req.reqParams = args
+
+        return next()
+    }
+
     checkArrayParams(ctx.req)
 
     // 根据配置生成请求的参数

src/utils/index.js

@@ -1,5 +1,5 @@
 export * from './fp'
 export * from './mp'
-export * from './env'
+export * from './judge'
 export * from './logger'
 export * from './params'

src/utils/judge.js

@@ -0,0 +1,9 @@
+export const isWx = () => (
+    typeof wx !== 'undefined' &&
+    typeof wx.request === 'function'
+)
+
+export const isFormData = (val) => (
+    (typeof FormData !== 'undefined') &&
+    (val instanceof FormData)
+)

test/.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
-    env: { jest: true }
+    env: { jest: true },
+    globals: {
+        FormData: true,
+    },
 }

test/__tests__/axios.test.js

@@ -92,6 +92,10 @@ describe('fake get requests', () => {
 })
 
 describe('fake post requests', () => {
+    beforeEach(() => {
+        mock.resetHistory()
+    })
+
     test('own-host', async () => {
         const data = { code: 0, data: 'own-host' }
         mock.onPost(reqOHUrl).reply(200, data)
@@ -123,4 +127,21 @@ describe('fake post requests', () => {
 
         expect(resData).toEqual({ code: 0, data: 'array data' })
     })
+
+    test('form-data', async () => {
+        mock.onPost(reqOHUrl).reply(200, {})
+        const formData = new FormData()
+        formData.append('a', 'a')
+        formData.append('b', 123)
+
+        await fakePostApi.oh(formData)
+
+        const {
+            data,
+            transformRequest,
+        } = mock.history.post[0]
+
+        expect(data).toBe(formData)
+        expect(transformRequest[0].name).toBe('transformRequest')
+    })
 })