Vue使用axios进行get请求拼接参数的2种方式详解
更新时间：2023年01月05日 10:27:12 作者：小花皮猪
axios中post请求都是要求携带参数进行请求,这篇文章主要给大家介绍了关于Vue使用axios进行get请求拼接参数的2种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
本文主要介绍如何在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)
}
)
也是可以正常获取到数据的
总结
以上就是我知道和经常在vue项目中使用axios进行get请求拼接参数的两种方式了
到此这篇关于Vue使用axios进行get请求拼接参数的2种方式的文章就介绍到这了,更多相关Vue axios进行get请求拼接参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
vue3+Element Plus实现自定义穿梭框的详细代码
找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件,本文给大家分享vue3+Element Plus实现自定义穿梭框的示例代码,感兴趣的朋友一起看看吧2024-01-01
vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决
这篇文章主要介绍了vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了Vue+LogicFlow+Flowable实现工作流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
在我们使用Vue开发时,经常会用到CSS,下面这篇文章主要给大家介绍了关于Css中该如何使用Vue变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)
使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下2023-04-04
下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
为了让一些不太清楚搭建前端项目的小白,更快上手,下面这篇文章主要给大家介绍了关于安装node.js以及搭建vue项目过程中遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
今天小编大家分享一篇解决vuex数据异步造成初始化的时候没值报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论