前端 如何提交form表單格式的請求體

以Dva.js爲例子(models.js)：

下面代碼中，有2個接口方法，1、addCollect添加收藏 2、cancelCollect取消收藏

提交表單格式的數據，需要new FormData 申請一個表單格式的實例，再通過實例去追加表單字段數據

addCollect: (params) => {
    params.isForm = true
    const collect = new FormData()
    collect.append('soleId', `${params.soleId}`)
    collect.append('type', params.type)
    Request(`/api${currEnv}/enshrine/add`, collect) // 添加收藏
  },
 

而請求封裝文件request.js則如下（支持純文本請求體、表達格式數據請求體，以及json格式數據請求體）：

import fetch from 'dva/fetch'

export default (url, ...params) => {
  const randomTime = Date.now() + Math.floor(Math.random() * 10000)
  const timeStamp = (url.includes('?') ? '&t=' : '?t=') + randomTime
  const requestUrl = process.env.ZQMB_HOST + url + timeStamp
  let postArray = params.map((meta) => {
    if (typeof meta === 'string') {
      return `'${meta}'`
    } else if (typeof meta === 'object') {
      
      return JSON.stringify(meta)
    } else {
      return meta
    }
  }).join(',')

  if(params[0] instanceof FormData){ // 針對FormData格式數據做處理
    postArray = params[0];
  }

  let data = ''
  return fetch(requestUrl, {
    mode: 'cors',
    method: 'POST',
    // body:   postArray.join(','),
    body: postArray,
    headers: {
      'msg.callback': '',
      'auth.sysid': process.env.ZQMB_SYSID,
      'auth.permit': process.env.ZQMB_PERMIT,
      'auth.token': window.shellBusinessToken,
    },
  })
    .then((res) => {
      if (res.ok) {
        data = res.clone().arrayBuffer()
        return res.json()
      } else {
        /* eslint-disable prefer-promise-reject-errors */
        return Promise.reject(res)
      }
    })
    .then((json) => {
      if (json.code === 0) {
        return json
      }

      if (json.code === 1 || json.code === -1) {
        return json.data
      } else {
        return data
      }

    })
    .catch((error) => {
      console.log(error)
      return data
    })
}

 

models.js完整代碼： 

import Request from './services/request'
import { Toast } from 'antd-mobile'

const ENV = 2
const devEnv = `/partyAppDev`
const testEnv = `/partyApp`
const currEnv = ENV === 1 ? devEnv : testEnv

const API = {
  addCollect: (params) => {
    params.isForm = true
    const collect = new FormData()
    collect.append('soleId', `${params.soleId}`)
    collect.append('type', params.type)
    Request(`/api${currEnv}/enshrine/add`, collect) // 添加收藏
  },
  cancelCollect: (params) => {
    params.isForm = true
    const collect = new FormData()
    collect.append('soleId', `${params.soleId}`)
    collect.append('type', params.type)
    Request(`/api${currEnv}/enshrine/cancel`, collect) // 取消收藏
  },
}

export default {
  namespace: '$',

  state: {
    collect: null,
  },

  reducers: {
    Collect(state, action) {
      return {
        ...state,
        collect: action.payload,
      }
    },
  },

  effects: {
    *addCollect(action, { call, put }) {
      const result = yield call(API.addCollect, action.payload)
      if (result) {
        yield put({
          type: 'Collect', // 調用reducer同名函數
          payload: result,
        })
      }
    },

    *cancelCollect(action, { call, put }) {
      const result = yield call(API.cancelCollect, action.payload)
      if (result) {
        yield put({
          type: 'Collect', // 調用reducer同名函數
          payload: result,
        })
      }
    },
  },

  subscriptions: {
    shellMock() {
      //
    },

    init() {
      // 判斷是否爲 iOS
      if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
        window.deviceOfiOS = true
        // document.body.className = (document.body.className += ' iOS').trim()
        document.getElementById('root').className = (document.getElementById('root').className += ' iOS').trim()
        const isIphonex = () => {
          if (typeof window !== 'undefined' && window) {
            return (
              /iphone/gi.test(window.navigator.userAgent) &&
              window.screen.height >= 812
            )
          }
          return false
        }
        if (isIphonex()) {
          document.getElementById('root').className = (document.getElementById('root').className += ' iOS-X').trim()
        }
      }
    },
  },
}