快捷導(dǎo)航

Vue使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的2種方式詳解

更新時(shí)間：2023年01月05日 10:27:12 作者：小花皮豬

axios中post請(qǐng)求都是要求攜帶參數(shù)進(jìn)行請(qǐng)求,這篇文章主要給大家介紹了關(guān)于Vue使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的2種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本文主要介紹如何在Vue使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的兩種方式

我們就以github上的一個(gè)開源接口舉例：

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

這是github給開發(fā)人員提供的一個(gè)接口，是get請(qǐng)求。我們可以直接通過瀏覽器訪問

很明顯，q是一個(gè)參數(shù)，xxx是參數(shù)的值，至于q的值是什么，就看我們傳什么參數(shù)，這種格式的傳參格式我知道的有以下兩種，下面分享給大家

方式1(不推薦)

最簡(jiǎn)單的方式：我們可以直接使用+進(jìn)行字符串拼接，如下所示

 axios.get('https://api.github.com/search/users?q='+this.keyWord).then(
                        // 成功回調(diào)
                        success=>{
                            console.log('請(qǐng)求成功！')
                            // 請(qǐng)求成功后的數(shù)據(jù)
                            console.log(success.data)
                        },
                        // 失敗回調(diào)
                        error=>{    
                            console.log('請(qǐng)求失??！')
                            // 請(qǐng)求失敗原因
                            console.log(error.message)
                        }
                    )

可以正常獲取到數(shù)據(jù)

方式2(推薦)

這種方式相比于第一種，更加的精準(zhǔn)，具體就是使用${}占位符進(jìn)行參數(shù)替換

這個(gè)${}替換參數(shù)的方式不是vue提供的，而是ES6

${ }是es6新增的字符串方法，可以配合單反引號(hào)完成字符串拼接的功能

如果用這種方式寫，就是下面的代碼：

 axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                        // 成功回調(diào)
                        success=>{
                            console.log('請(qǐng)求成功！')
                            // 請(qǐng)求成功后的數(shù)據(jù)
                            console.log(success.data)
                        },
                        // 失敗回調(diào)
                        error=>{    
                            console.log('請(qǐng)求失?。?)
                            // 請(qǐng)求失敗原因
                            console.log(error.message)
                        }
                    )

也是可以正常獲取到數(shù)據(jù)的

總結(jié)

以上就是我知道和經(jīng)常在vue項(xiàng)目中使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的兩種方式了

到此這篇關(guān)于Vue使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的2種方式的文章就介紹到這了,更多相關(guān)Vue axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: