VUE 之Request Payload 和from Data

最新推荐文章于 2024-07-28 21:40:31 发布

原创最新推荐文章于 2024-07-28 21:40:31 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在使用axios发送POST请求时，前端数据无法被后端接收的问题。通过对比axios与ajax的数据传输格式，详细介绍了如何将RequestPayload转换为FormData格式的三种方法：使用qs模块、URLSearchParams和直接字符串化。

最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况：

代码：

image.png

后来仔细对比ajax发现axios传值是这样的：

image.png

而ajax传值是这样的：

image.png

一个Request Payload，一个Form Data。
将Request Payload 转为Form Data格式就可以了，有三种方式：

一、使用qs（推荐）

首先在你的项目里安装qs模块：

引入好了之后，把上面的postData用qs转一下再发送给后台就可以了：

这样发送给后台时就是Format Data格式了。

二、使用URLSearchParams

let postData= new URLSearchParams()
postData.append('certificationAccount',  that.certificationAccount)
postData.append('balance',  that.balance)

三、直接使用字符串

let postData ='certificationAccount =' + that.certificationAccount + '&balance=' + that.balance

es6

es6写法：
   let postData = `
          certificationAccount = ${that.certificationAccount}&balance=${that.balance}
`

三种方法的原理是一样一样的，都是转化为字符串，但第三种方法当所传的值为null时会被转化为空字符串，个人推荐的是第一种方法。

通常一些小型的项目，没必要大费周章的搭建脚手架，直接以CDN的方式引入vue.js 即可享受到vue的便利性

那么我们想用到vue中的一些功能，比如axios 呢。

注意：Axios与Qs必须配合使用，否则后台会拿不到数据

CDN引入：

Axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Qs：<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>

使用方法：

   let isurl = "www.xxxxx.com/list";
    let o={
        id:2
    }
    axios.post(isurl,Qs.stringify(o)).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })

axios.post 修改header头的方法：

   axios.post(isurl,Qs.stringify(o),{'
        header:{
            'Content-Type': 'multipart/form-data'
        }