如何封装axios form-data针对统一的formData入参方式

封装axios请求可以方便复用，降低代码耦合度，提高代码可维护性。在处理表单数据时，我们常常需要将数据以form-data的格式发送给后端处理。以下是封装axiosform-data请求的攻略：

步骤

第一步：引入相关依赖

需要安装两个依赖：qs和form-data。

npm install qs form-data --save

第二步：创建axios实例

在封装请求之前，我们需要先创建axios实例。

import axios from 'axios'

const baseURL = process.env.NODE_ENV === 'production' ? 'https://example.com' : 'http://localhost:3000'

const axiosInstance = axios.create({
  baseURL,
  timeout: 10000, // 超时时间
  withCredentials: true, // 跨域携带cookie
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})

export default axiosInstance

第三步：封装请求方法

下面是封装postForm方法的完整代码。

import axiosInstance from './axios'
import qs from 'qs'
import FormData from 'form-data'

export function postForm(url, data) {
  const form = new FormData()
  for (const key in data) {
    form.append(key, data[key])
  }

  return axiosInstance({
    method: 'POST',
    url,
    data: form,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

第四步：调用请求方法

可以像以下这样调用封装好的postForm方法。

import { postForm } from './api'

const data = {
  name: '张三',
  age: 18
}

postForm('/user/create', data)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

示例

下面是两个示例，以更加具体地说明如何使用form-data格式发送表单数据。

示例一：上传文件

上传文件时，我们通常需要使用form-data格式发送数据。以下是一个简单的示例，上传一个文件并返回文件的URL。

export function uploadFile(file) {
  const data = new FormData()
  data.append('file', file)

  return axiosInstance.post('/file/upload', data, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

示例二：提交表单数据

以下是一个简单的示例，演示如何以form-data格式提交表单数据，包括普通数据和文件。

import { postForm } from './api'

const data = {
  name: 'John',
  age: 28,
  photo: file // 文件对象
}

postForm('/user/create', data)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

在postForm方法中，会将data转换为form-data格式，并发送给后端。注意，文件对象需要以文件表单项的方式添加到FormData中。