使用axios发送jsonp请求

最新推荐文章于 2024-08-26 03:21:27 发布

原创最新推荐文章于 2024-08-26 03:21:27 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #ajax

vue.js 专栏收录该内容

46 篇文章

订阅专栏

文章介绍了在axios不支持jsonp的情况下，如何手动封装一个JSONP函数来实现跨域请求。通过创建script标签，设置src属性为带callback参数的URL，然后处理回调函数来解析响应数据。

【背景】

axios 本身不支持 jsonp 这种 dataType（不同于 ajax）

【解决方法】

自行封装一个 jsonp 调用方法：

function jsonp (url) {
  return new Promise((resolve, reject) => {
    // 这里的 "jsonCallBack" ，和调用的 jsonp 的 url 中的 callback 值相对应
    window.jsonCallBack =(res) => {
      resolve(res)
    }
    const JSONP = document.createElement('script');
    JSONP.type = 'text/javascript';
    JSONP.src = url;
    document.getElementsByTagName('head')[0].appendChild(JSONP);
    setTimeout(() => {
        document.getElementsByTagName('head')[0].removeChild(JSONP)
    },500)
  })
}

调用示例：

let res = await jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?location=${evt.latLng.lat},${evt.latLng.lng}&get_poi=1&callback=jsonCallBack&output=jsonp`)
console.log(res)