1. 程式人生 > >URL地址拼接方法封裝

URL地址拼接方法封裝

在前端開發中,我們經常會需要去請求不同頁面的資料,這個時候我們就需要拼接我們的需求引數,並將我們的請求傳送給後端處理,類似這樣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) : '' }

如果有同學不理解promise的用法,可以參考我的另一篇文章:=>Promise物件;