前言

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

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

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

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

Vue使用axios进行get请求拼接参数的几种方式
很明显,q是一个参数,xxx是参数的值,至于q的值是什么,就看我们传什么参数,这种格式的传参格式我知道的有以下两种,下面分享给大家

方式1(不推荐)

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

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

 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)
                        }
                    )

可以正常获取到数据

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

方式2(推荐)

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

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

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

如果用这种方式写,就是下面的代码:

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

 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)
                        }
                    )

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

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

方式3(推荐)

由于篇幅原因,另写一篇,参考:Vue使用axios发送get请求并携带参数

总结

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

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。