h5中调用使用jsonp,注意参数中会带上callback,需要额外处理这个参数的逻辑。
这里jsop是用的库为 vue-jsonp
/**
* 生成签名
* @param {*} path
* @param {*} params
*/
const getSig = function (path, params) {
const paramsStr = Object.keys(params)
.sort()
.reduce((res, key) => {
const value = params[key]
return [...res, key + '=' + value]
}, [])
.join('&')
return md5(path + '?' + paramsStr + SECRET_KEY)
}
/**
* 地图专用API请求(主要是为了处理跨域问题)
* @param {Object} path
* @param {Object} param
*/
const mapRequest = function (path, params) {
return new Promise((resolve, reject) => {
const callbackName = 'jsonp_' + guid()
params = {
key: MAP_KEY,
output: 'json',
...params,
}
// #ifdef H5
params.output = 'jsonp'
params.callback = callbackName
// #endif
params.sig = getSig(path, params)
const url = 'https://apis.map.qq.com' + path
// #ifdef H5
jsonp(url, { ...params, callbackName })
.then((data) => {
resolve(data)
})
.catch((error) => {
reject(error)
})
// #endif
// #ifndef H5
uni.request({
url: url,
method: 'GET',
data: params,
success: (data) => {
resolve(data.data)
},
fail: (error) => {
reject(error)
},
})
// #endif
})
}