axios 传递参数的方式(data 与 params 的区别与后端取值方式)

Love The Way You Lie 2023-09-29 10:59 20阅读 0赞

> `axios` 大家都非常的清楚，一个既可以用于`客户端`或者 `服务端`发送`http`请求的库。但是在前后端联调的时候有的时候会很难受，所以这里我来做一个总结。希望能帮助到有缘人。

## 参数的传递方式 ##

> 参数传递一般有两种，一种是 使用 `params`, 另一种是 `data`的方式,有很多的时候我们看到的前端代码是这样的。
> 
> **params 是get请求会把参数放到url 中**
> 
> **data 是post请求会把参数添加到请求体(body)中**，如何获取请求体中的数据我后面有写到

### get 请求 ###

axios({
        
        method: 'GET',
        url: 'xxxxx',
        params: param,
      })
    或者 
    axios({
        
        method: 'GET',
        url: '/xxx?message=' + msg,
      })

### post 请求 ###

axios({
        
        method: 'POST',
        url: '/xxxxx',
        data: param,
      })
      或者
     axios({
        
        method: 'POST',
        url: '/xxxxx',
        params: param,
      })

## 正确传递 ##

> 传递参数的解决办法分为post和get,咋们从这里来看一下

### `post` ###

> `post` 是大多数人会搞错的，咋们来看看。

#### `data` 的形式 ####

从例子中说话，使用的案例代码是post参数，并且没有做任何的转码。  
![在这里插入图片描述][b3b2084e3e71fcf867ffb63a98794031.png]

method: 'POST',
        url: '/xxxxx',
        data: param,
      })

##### 控制台结果 #####

![在这里插入图片描述][6ab6f71e1bdcc81aa3fffda259dbceea.png]

> 使用data传递的是一个对象，在控制台中看到的话是 `request payload`

**参数的view sources如下：**  
![在这里插入图片描述][e2df09d6fea9a23bd558aa8c92656c34.png]

##### `node` 后台接收参数的方式 #####

> 这里我采用的是`koa` 来搭建的后台。需要使用 `koa-bodyparser` 这个插件来解析`body` 的参数

import Koa from 'koa';
    import bodyParser from 'koa-bodyparser'
    const app = new Koa();
    
    // 解析body
    app.use(bodyParser());
    
    app.listen(9020, () => {
        
      console.log('the server is listen 9020 port');
    })

接受方式如下：

![在这里插入图片描述][171542f0b994837d0ebb51f77f0537b8.png]

##### `java` 后台接收参数的方式 #####

> 对于 java 来说，本人并不是那么熟悉，但是知道的是。如果需要接受`axios` 以`data` 传递的参数。需要使用注解 `@responseBody` 并且使用的是实体类来接收的.  
> ![在这里插入图片描述][f267601f9759c6fba1f5315f7d716a85.png]  
> `post data` 的形式 ，不管是 哪种服务端的语言，都需要从`body`中获取参数。主要用于 传递 对象的参数，后台拿到的数据是一个 `obj`。 data 形式的数据有可以做好多事情， **文件上传**，**表单提交** 等

#### `params` 的形式 ####

这个是一个对象形式传递的，案例代码如下：

![在这里插入图片描述][1d41f693df02a610f5371731c800f675.png]

axios({
        
        method: 'POST',
        url: '/xxxxx',
        params: param,
      })

##### 浏览器结果分析 #####

![在这里插入图片描述][f302249db259f568cc9ff92700179a54.png]  
**查看view sourcer 如下：**  
![在这里插入图片描述][f013a1ff6c14c55304d1e8a2cd6b3401.png]

##### `node` 后台接收参数的方式 #####

> 启动服务和上面一样，但是接收参数的方式有点变化

![在这里插入图片描述][e09ce5457e736c96c5a5337cdbb6ea47.png]

##### `java` 后台接收参数的方式 #####

> 使用request的可以获取到其值

![image-20220420000855961][]

### get 请求 ###

> get 请求不管使用哪种方式，最后的参数都会放到路径上。  
> 使用param 只是[axios][]帮你把这个参数进行了序列化，并且拼接在 url上面。原因的话，请查看下面

## 出现两种的原因 ##

> 遇到这个问题，咋们就需要去看 `axios` 的源码了.这里 只会看处理参数的部分。有兴趣的自己去查看源码。

### 处理`data` ###

> 在`axios`文件中 的 `core/dispatchRequest.js` 中，我们可以看到 ，`axois`会 `data`

![在这里插入图片描述][cf471ca03405da8012ed90c86297ca74.png]  
在 `axios` 的 `default.js` 中，有一个函数专门转换 `data` 参数的 。  
![在这里插入图片描述][3f9fddab3ea9430c204500b95bdcd0cb.png]

> **注意**： 上面只是举例 `data` 传递参数的一种情况哈！其实`data` 也有在地址栏 上拼接的情况，或者 是**文件上传**的等情况。太多了，这里 只是讲清楚使用的方式。

### 处理 `params` ###

> 在`axios`文件中 的 `adapt/ xhr.js` 中，我们可以看到 ，`axois`会 `params`的参数放到`url`路径中。

![在这里插入图片描述][5bb4aa248387b72346b87a874d667523.png]  
buildUrl 一些关键代码如下 ：  
![在这里插入图片描述][f9c45101289b828741d29775e81c5024.png]

## 总结 ##

其实前端和后端 对接参数过程，对于`post`请求，`data` 不行，那就使用 `params`来 进行 传递，如果都不行，那就可能后端有问题了。

### 彩蛋 ###

后台测试数据可以使用 `postman`， 如果可以传递的参数可以调用通过。`postman`是可以看到请求的代码的方式的。  
![在这里插入图片描述][25f30fa85fe1c0fac27df79b2262fee2.png]

[b3b2084e3e71fcf867ffb63a98794031.png]: https://img-blog.csdnimg.cn/img_convert/b3b2084e3e71fcf867ffb63a98794031.png
[6ab6f71e1bdcc81aa3fffda259dbceea.png]: https://img-blog.csdnimg.cn/img_convert/6ab6f71e1bdcc81aa3fffda259dbceea.png
[e2df09d6fea9a23bd558aa8c92656c34.png]: https://img-blog.csdnimg.cn/img_convert/e2df09d6fea9a23bd558aa8c92656c34.png
[171542f0b994837d0ebb51f77f0537b8.png]: https://img-blog.csdnimg.cn/img_convert/171542f0b994837d0ebb51f77f0537b8.png
[f267601f9759c6fba1f5315f7d716a85.png]: https://img-blog.csdnimg.cn/img_convert/f267601f9759c6fba1f5315f7d716a85.png
[1d41f693df02a610f5371731c800f675.png]: https://img-blog.csdnimg.cn/img_convert/1d41f693df02a610f5371731c800f675.png
[f302249db259f568cc9ff92700179a54.png]: https://img-blog.csdnimg.cn/img_convert/f302249db259f568cc9ff92700179a54.png
[f013a1ff6c14c55304d1e8a2cd6b3401.png]: https://img-blog.csdnimg.cn/img_convert/f013a1ff6c14c55304d1e8a2cd6b3401.png
[e09ce5457e736c96c5a5337cdbb6ea47.png]: https://img-blog.csdnimg.cn/img_convert/e09ce5457e736c96c5a5337cdbb6ea47.png
[image-20220420000855961]: https://img-blog.csdnimg.cn/img_convert/1c41a7c70c1967f8a0fcfe20e8084658.png
[axios]: https://so.csdn.net/so/search?q=axios&spm=1001.2101.3001.7020
[cf471ca03405da8012ed90c86297ca74.png]: https://img-blog.csdnimg.cn/img_convert/cf471ca03405da8012ed90c86297ca74.png
[3f9fddab3ea9430c204500b95bdcd0cb.png]: https://img-blog.csdnimg.cn/img_convert/3f9fddab3ea9430c204500b95bdcd0cb.png
[5bb4aa248387b72346b87a874d667523.png]: https://img-blog.csdnimg.cn/img_convert/5bb4aa248387b72346b87a874d667523.png
[f9c45101289b828741d29775e81c5024.png]: https://img-blog.csdnimg.cn/img_convert/f9c45101289b828741d29775e81c5024.png
[25f30fa85fe1c0fac27df79b2262fee2.png]: https://img-blog.csdnimg.cn/img_convert/25f30fa85fe1c0fac27df79b2262fee2.png