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

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方法调用百度搜索接口：

• 百度搜索接口: https://suggestion.baidu.com/su?wd=wd&cb=jsonp_1686553435404_17116
• 百度搜索接口: https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn

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

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

参考链接：

• JSONP及Axios
• axios 中 如何使用 jsonp