Vue使用axios进行get请求拼接参数的几种方式

梦里梦外; 2023-09-23 15:50 119阅读 0赞

## 前言 ##

本文主要介绍如何在Vue使用axios进行get请求拼接参数的两种方式

我们就以github上的一个开源接口举例：

> https://api.github.com/search/users?q=xxx

这是github给开发人员提供的一个接口，是get请求。我们可以直接通过浏览器访问

![在这里插入图片描述][116ee33128f846a39dac69d234f5c6f4.png]  
很明显，q是一个参数，xxx是参数的值，至于q的值是什么，就看我们传什么参数，这种格式的传参格式我知道的有以下两种，下面分享给大家

## 方式1(不推荐) ##

最简单的方式：我们可以直接使用+进行字符串拼接，如下所示

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

axios.get('https://api.github.com/search/users?q='+this.keyWord).then(
                            // 成功回调
                            success=>{
        
                                console.log('请求成功！')
                                // 请求成功后的数据
                                console.log(success.data)
                            },
                            // 失败回调
                            error=>{
            
                                console.log('请求失败！')
                                // 请求失败原因
                                console.log(error.message)
                            }
                        )

可以正常获取到数据

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

## 方式2(推荐) ##

这种方式相比于第一种，更加的精准，具体就是使用$\{\}占位符进行参数替换

这个$\{\}替换参数的方式不是vue提供的，而是ES6

> $\{ \}是es6新增的字符串方法，可以配合单反引号完成字符串拼接的功能

如果用这种方式写，就是下面的代码：

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

axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                            // 成功回调
                            success=>{
        
                                console.log('请求成功！')
                                // 请求成功后的数据
                                console.log(success.data)
                            },
                            // 失败回调
                            error=>{
            
                                console.log('请求失败！')
                                // 请求失败原因
                                console.log(error.message)
                            }
                        )

也是可以正常获取到数据的

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

## 方式3(推荐) ##

由于篇幅原因，另写一篇，参考：[Vue使用axios发送get请求并携带参数][Vue_axios_get]

## 总结 ##

以上就是我知道和经常在vue项目中使用axios进行get请求拼接参数的几种方式了

如果大家知道更多的方式或者建议，欢迎随时留言

[116ee33128f846a39dac69d234f5c6f4.png]: https://img-blog.csdnimg.cn/116ee33128f846a39dac69d234f5c6f4.png
[224402d479e343db87bbc0649c9261a8.png]: https://img-blog.csdnimg.cn/224402d479e343db87bbc0649c9261a8.png
[0c45d6ff185d49e8b06ff2140203b30d.png]: https://img-blog.csdnimg.cn/0c45d6ff185d49e8b06ff2140203b30d.png
[23fb8254ad5d4d4086454dd46dd75efc.png]: https://img-blog.csdnimg.cn/23fb8254ad5d4d4086454dd46dd75efc.png
[64cf389c2c2847cf98bd522cbf8f002b.png]: https://img-blog.csdnimg.cn/64cf389c2c2847cf98bd522cbf8f002b.png
[Vue_axios_get]: https://blog.csdn.net/weixin_46713508/article/details/128839202