vue3 引入腾讯地图解决请求接口跨域问题

上一篇文章中写到使用 uniapp 如何解决跨域问题，那么在使用 Vue3 时，又该如何去处理呢？

一、在 index.html 中引入

二、重写 jsonp

重写 jsonp，我们就不用在项目中安装 jsonp 了。

export const jsonp = function (url, data) {
  return new Promise((resolve, reject) => {
    // 1.初始化url
    let dataString = url.indexOf('?') === -1 ? '?' : '&'
    let callbackName = `jsonpCB_${Date.now()}`;
    url += `${dataString}callback=${callbackName}`
    if (data) {

      // 2.有请求参数，依次添加到url
      for (let k in data) {
        url += `&${k}=${data[k]}`
      }
    }

    let scriptNode = document.createElement('script');
    scriptNode.src = url;

    // 3. callback
    window[callbackName] = (result) => {
      result ? resolve(result) : reject('没有返回数据');
      delete window[callbackName];
      document.body.removeChild(scriptNode);
    }

    // 4. 异常情况
    scriptNode.addEventListener('error', () => {
      reject('接口返回数据失败');
      delete window[callbackName];
      document.body.removeChild(scriptNode);
    }, false)

    // 5. 开始请求
    document.body.appendChild(scriptNode)
  })
}

三、在组件中使用

// 引入重写的jsonp文件
import { jsonp } from '../../common/jsonp/jsonp.js'

// 使用
const onSearch = () => {
    let url = 'https://apis.map.qq.com/ws/...';
    jsonp(url, {
        key: '自己申请的key',
        output: 'jsonp',
        // 需要传入的参数
        ...
    }).then(res => {
        // 返回的结果
        ...
    })
}