iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue使用axios进行get请求拼接参数的2种方式详解
  • 476
分享到

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

vue get请求传递参数vue获取get请求参数vue的get请求 2023-01-05 12:01:47 476人浏览 安东尼
摘要

目录前言方式1(不推荐)方式2(推荐)总结前言 本文主要介绍如何在Vue使用axiOS进行get请求拼接参数的两种方式 我们就以GitHub上的一个开源接口举例: https://a

前言

本文主要介绍如何在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请求拼接参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue使用axios进行get请求拼接参数的2种方式详解

本文链接: https://www.lsjlt.com/news/176826.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作