URL地址拼接方法封裝
阿新 • • 發佈:2018-12-20
在前端開發中,我們經常會需要去請求不同頁面的資料,這個時候我們就需要拼接我們的需求引數,並將我們的請求傳送給後端處理,類似這樣www.baidu.com?singer=王菲
,這樣我們就可以向後端去請求王菲的相關資料,這裡把這個事情封裝成了一個方法,方便呼叫,自己在專案中也可以使用這種方法:
// 我們通常是用jsonp來請求資料,所以這裡方法名定義為jsonp
// url: 我們目標地址,如www.baidu.com
// data: 我們的附帶引數,以一個物件儲存,如 data={'singer':王菲,'type':人氣歌手}
// option: 回撥函式,根據自己需要來寫
function jsonp(url, data, option) {
// 拼接url
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
// 新建一個promise物件,用來做非同步處理
return new Promise((resolve, reject) => {
originJsonp(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
function param(data) {
let url = ''
// 遍歷data物件,取出需要的引數
for (var k in data) {
// 如果當前value為undefined ,則返回空字串
let value = data[k] !== undefined ? data[k] : ''
// 得到引數,並且拼接引數,為下一步拼接到url後面做準備
url += '&' + k + '=' + encodeURIComponent(value)
}
// 如果url存在,則去除首字元並返回,因為主函式已經包含了'&',否則返回空串
return url ? url.substring(1) : ''
}