首页

在vue中利用jsonp调用百度搜索建议接口

kkcode
2023-08-18  阅读 141

jsonp方法的实现:

export function jsonp(url, param = {}, paramName) {
  return new Promise((resolve, reject) => {
    if (typeof url != 'string') {
      throw new Error('url必须为字符串')
    }
    url += '?'
    // 将param转为&拼接
    for (let key in param) {
      url += `&${key}=${param[key]}`
    }
    //函数名需要加工(保持的函数名的唯一)
    let callbackName = 'fn' + Date.now() + Math.ceil(Math.random() * 10)
    //加给对应的window
    window[callbackName] = resolve //resolve里面的参数会被then接收 这个resolve会被服务器自动调用并传入参数
    //将参数名和回调函数名传入
    url += `&${paramName}=${callbackName}`
    //创建一个script标签
    let script = document.createElement('script')
    //指定对应的src地址
    script.src = url
    //加给body
    document.body.appendChild(script)
    //script标签加载完毕
    script.onload = function () {
      this.remove() //将script标签删除
      delete window[callbackName] //将对应的属性删除
    }
    //script报错的时候
    script.onerror = function (err) {
      reject('错误' + err)
    }
  })
}复制代码

jsonp方法调用百度搜索接口:

jsonp(
'https://suggestion.baidu.com/su',
{
wd: this.wd
},
'cb'
).then((res) => {
if (res.s && res.s.length !== 0) {
this.suggestions = res.s;
}
});复制代码

具体案列请参考: 哦牛牛的搜索框

参考链接:

本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】