Vue使用axios進行g(shù)et請求拼接參數(shù)的2種方式詳解
前言
本文主要介紹如何在Vue使用axios進行g(shù)et請求拼接參數(shù)的兩種方式
我們就以github上的一個開源接口舉例:
https://api.github.com/search/users?q=xxx
這是github給開發(fā)人員提供的一個接口,是get請求。我們可以直接通過瀏覽器訪問

很明顯,q是一個參數(shù),xxx是參數(shù)的值,至于q的值是什么,就看我們傳什么參數(shù),這種格式的傳參格式我知道的有以下兩種,下面分享給大家
方式1(不推薦)
最簡單的方式:我們可以直接使用+進行字符串拼接,如下所示

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

方式2(推薦)
這種方式相比于第一種,更加的精準(zhǔn),具體就是使用${}占位符進行參數(shù)替換
這個${}替換參數(shù)的方式不是vue提供的,而是ES6
${ }是es6新增的字符串方法,可以配合單反引號完成字符串拼接的功能
如果用這種方式寫,就是下面的代碼:

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

總結(jié)
以上就是我知道和經(jīng)常在vue項目中使用axios進行g(shù)et請求拼接參數(shù)的兩種方式了
到此這篇關(guān)于Vue使用axios進行g(shù)et請求拼接參數(shù)的2種方式的文章就介紹到這了,更多相關(guān)Vue axios進行g(shù)et請求拼接參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.js動畫中的js鉤子函數(shù)的實現(xiàn)
這篇文章主要介紹了vue.js動畫中的js鉤子函數(shù)的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
詳解vue axios用post提交的數(shù)據(jù)格式
這篇文章主要介紹了詳解vue axios用post提交的數(shù)據(jù)格式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

