位置: IT常识 - 正文
Vue使用axios进行get请求拼接参数的几种方式(axios在vue中的使用慕课笔记)
编辑：rootadmin推荐整理分享Vue使用axios进行get请求拼接参数的几种方式(axios在vue中的使用慕课笔记)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue axios使用,vuejs axios,vue3.0使用axios,vuex中使用axios,vue-axios详细介绍,vuex中使用axios,vue axios使用,vuex中使用axios,内容如对您有帮助，希望把文章链接给更多的朋友！
本文主要介绍如何在Vue使用axios进行get请求拼接参数的两种方式
我们就以github上的一个开源接口举例：
https://api.github.com/search/users?q=xxx
这是github给开发人员提供的一个接口，是get请求。我们可以直接通过浏览器访问
很明显，q是一个参数，xxx是参数的值，至于q的值是什么，就看我们传什么参数，这种格式的传参格式我知道的有以下两种，下面分享给大家
方式1(不推荐)最简单的方式：我们可以直接使用+进行字符串拼接，如下所示
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) } )
可以正常获取到数据
方式2(推荐)这种方式相比于第一种，更加的精准，具体就是使用${}占位符进行参数替换
这个${}替换参数的方式不是vue提供的，而是ES6
${ }是es6新增的字符串方法，可以配合单反引号完成字符串拼接的功能
如果用这种方式写，就是下面的代码：
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) } )也是可以正常获取到数据的
方式3(推荐)由于篇幅原因，另写一篇，参考：Vue使用axios发送get请求并携带参数
总结以上就是我知道和经常在vue项目中使用axios进行get请求拼接参数的几种方式了
如果大家知道更多的方式或者建议，欢迎随时留言
上一篇：亚苏尼国家公园，厄瓜多尔 (© Paul Bertner/Minden Pictures)(苏尼亚尼)
下一篇：vue中三种for循环（含案例分析）(vue的foreach循环)