Vue中如何在GET请求同时携带FormData与Query String参数

首先要明确：标准HTTP规范中，GET请求是不包含请求体的，很多浏览器、HTTP客户端库或者服务器都会忽略GET请求的请求体。如果不是后端明确要求这种非常规的请求方式，更推荐把FormData里的参数也放到Query String里，或者改用POST请求。但如果确实需要实现这个需求，可以按下面的步骤修改代码：

1. 修改GET请求方法的实现 #

你当前的get方法使用Vue.http.get封装，这个方法默认不会处理请求体（body），所以我们需要改用Vue Resource的通用请求方式，确保请求体能被正确发送：

const OPTIONS = { credentials: true }
function isResponseValidString (response) { return typeof response.body === 'string' }
function isResponseValidObject (response) { return typeof response.body === 'object' }

get (endpoint, options = {}) {
  // 合并基础配置与传入的选项
  const requestOptions = Object.assign({}, OPTIONS, options)
  
  // 使用通用HTTP请求方法发送GET，确保body参数被处理
  return Vue.http({
    method: 'GET',
    url: endpoint,
    ...requestOptions
  }).then(
    response => {
      if (isResponseValidString(response) || isResponseValidObject(response)) {
        if (response.body.data && typeof response.body.data !== 'object') {
          return Promise.reject(response)
        }
        return Promise.resolve(response)
      }
      return Promise.reject(response)
    }, error => {
      return Promise.reject(error)
    })
}

2. 修改调用代码 #

现在你可以在调用时同时传入params（Query String参数）和body（FormData请求体）：

const formData = new FormData()
formData.append('id', this.id)

// 调用时同时传入Query参数和FormData
apiClass.get(ENDPOINTS.block, { 
  params: { id: this.id }, // 对应Query String Parameters
  body: formData           // 对应FormData请求体
}).then(response => {
  console.log('r', response)
}, error => {
  console.log('e', error)
}).finally(() => {})

额外注意事项 #

• 务必确认你的后端框架支持接收GET请求的请求体，比如Express需要搭配multer来解析multipart/form-data类型的请求体，且框架本身不会默认丢弃GET的请求体。
• 这种方式不符合HTTP规范，可能会遇到兼容性问题（比如部分CDN、代理服务器会丢弃GET请求体），如果有其他可选方案，优先选择更规范的实现方式。

内容的提问来源于stack exchange，提问作者Marek