Vue使用axios进行get请求拼接参数的几种方式
Vue 方式 进行 参数 请求 几种 get 拼接
2023-09-11 14:22:31 时间
前言
本文主要介绍如何在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请求拼接参数的几种方式了
如果大家知道更多的方式或者建议,欢迎随时留言
相关文章
- (尚034)Vue_案例_数据存储优化(代码优化!!!)
- vue.js 错误提示bash: vue: command not found
- [转] vue前端异常监控sentry实践
- 14 vue的data函数中对象和数组的方式绑定模板样式
- 【Vue】通过Animate.css实现第三方动画效果示例(图文+实例)
- 【Vue】通过Object.defineProperty向数组中添加属性和值(数据代理)
- Vue —— 创建响应式对象的四种方式对比(reactive、ref、toRef、toRefs)
- vue实现返回页面时回到原来的位置
- Vue2.0 搭建Vue脚手架(vue-cli)
- vue打印页面
- vue数据更新,但是页面组件没有更新,甚至获取的this中的数据都不一样,使用$set也不行
- vue.js不仅是一种模式,也是一种工程组织方式
- 『前端优化』—— Vue中避免滥用this去读取data中数据
- vue中使用$bus
- Vue之v-for、v-show使用举例
- Django+Vue项目学习第二篇:vue项目创建
- vue用Export2Excel 自动换行
- WTM(基于Vue)项目发布记录
- vue 子组件触发父组件方法的两种方式