Vue项目中使用jsonp抓取跨域数据的方法

使用jsonp抓取跨域数据是前端开发中常用的一种方法，而在Vue项目中使用jsonp抓取跨域数据则需要注意一些细节。下面是Vue项目中使用jsonp抓取跨域数据的完整攻略：

1.概述

前端的同学们都知道，由于浏览器的同源策略限制，导致 Ajax 请求不能跨域。而 JSONP 是一种跨域请求的解决方案，可以通过 script 标签来实现跨域请求。
Vue.js 既不自带 JSONP，也不支持 JSONP，但是我们可以利用第三方库或者手写实现。

2.第三方库

在Vue项目中，可以使用第三方库来实现 JSONP 请求。
例如使用jsonp库，自己手动安装（npm install jsonp），安装完成后可以在 Vue 组件中使用。

import jsonp from 'jsonp'

export default {
  methods: {
    getData () {
      jsonp('http://api.xxx.com/data', (err, data) => {
        if (err) {
          console.error(err.message)
        } else {
          console.log(data)
        }
      })
    }
  }
}

在上面的代码中，我们使用了 jsonp 库请求了一个 http://api.xxx.com/data 的地址，如果请求成功，那么就将返回的数据打印在控制台的。

3.手写实现

除了使用第三方库之外，还可以通过手写代码实现。在此我们不再赘述jsonp原理，只给出手写jsonp的示例代码。

export default function jsonp (url, data, callback) {
  let script = document.createElement('script')
  let urlData = url.indexOf('?') === -1 ? '?' : '&'
  let callbackName = 'jsonp' + Date.now().toString(36)

  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      urlData += `${key}=${encodeURIComponent(data[key])}&`
    }
  }

  window[callbackName] = (responseData) => {
    callback(null, responseData)
    delete window[callbackName]
  }

  script.src = `${url}${urlData}callback=${callbackName}`
  document.body.appendChild(script)
}

在上面的代码中，我们手写了一个 jsonp 函数，这个函数接收三个参数：url、data 和 callback。其中 url 是请求的地址，data 是请求的参数，callback 是请求成功后的回调函数。
这个函数首先通过 document.createElement 创建一个 script 标签，然后将 callback 的函数名随机生成，再通过循环将参数 data 拼接成 urlData。接着，将回调函数的名字挂载到 window 上，同时创建一个 script 标签并将 urlData 和 callback 映射成一个 JavaScript 的函数。最后，将这个 script 标签添加到 HTML 的 body 中即可。

total

Vue.js 项目中使用 JSONP 获取数据的方法可以结合第三方库和手写代码的形式来实现。不论采用哪种方式，都需要对 JSONP 原理和特性有一定的了解，同时注意跨域请求的注意事项，例如不能使用 post，不能携带cookie等。