axios 发送formdata

自我学习记录（一直会更新🌺）

axios 默认是Payload格式数据请求，但有时候后端接收参数要求必须是Form Data格式的，所以我们就得进行转换。 Payload和Form Data的主要设置是根据请求头的Content-Type的值来的:
Payload 　　 Content-Type: 'application/json; charset=utf-8'
Form Data　　 Content-Type: 'application/x-www-form-urlencoded'

实现方法一：

options = {
      withCredentials: true,
      baseURL,
      headers: {
        // 'Content-Type': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      timeout: 5000,
      // `transformRequest` 允许在向服务器发送前，修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
      transformRequest: [
        function(data) {
          if (isNullOrEmpty(data)) return
          let ret = ''
          for (let [key, value] of Object.entries(data)) {
            ret +=
              encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&'
          }
          ret = ret.substr(0, ret.length - 1)
          return ret
        },
      ],

实现方法二： 其中 qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用。

import axios from 'axios'
import qs from 'qs'
 
// 实例对象
let instance = axios.create({
  timeout: 3000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
 
// 请求拦截器
instance.interceptors.request.use(
  config => {
    config.data = qs.stringify(config.data) // 转为formdata数据格式
    return config
  },
  error => Promise.error(error)
)

页面直接调用

//通过POST方式发送FormData格式的参数 的写法  
let data = await this.$http({//这里的 this.$http 就是axios 因为 我在vue原型上，挂载axios的时候，把axios改名为$http 了。
    url: 'https://i.meituan.com/account/custom/mobilelogincode2',  //请求路径（接口）
    method: 'POST', //请求方式
    headers: { 'content-type': 'application/x-www-form-urlencoded' }, // 请求头，发送FormData格式的数据，必须是 这种请求头。
    data: qs.stringify({mobile: '17664068406'}),  //发送请求要传的FormData参数。必须用 qs.stringify（）序列化一下。
});