vue中利用Promise封装jsonp并调取数据

下面是关于“vue中利用Promise封装jsonp并调取数据”这个话题的详细讲解。

简介

在前端开发中，由于浏览器的安全策略限制，无法直接发送跨域请求。一般情况下，我们使用jsonp协议实现跨域请求。而在Vue中，我们可以通过Promise来对jsonp进行封装。

jsonp

在跨域请求中，我们经常会使用jsonp。jsonp本质上是利用script标签来实现跨域请求的。我们通过动态创建一个script标签，然后在请求后台数据时，通过设置src属性值将请求发送到后台，然后后台将数据封装到一个JS方法中返回，这个JS方法的函数名是我们定义的一个回调函数的名字，回调函数封装在src中，请求完毕后会立即执行回调函数。

Promise封装jsonp

下面给出一个Promise封装jsonp的代码，可以方便的在Vue中使用它获取跨域数据。

function jsonp(url, data) {
  return new Promise((resolve, reject) => {
    let params = ''
    for (var k in data) {
      params += `&${k}=${data[k]}`
    }
    url = `${url}?${params.slice(1)}`

    let callbackName = `jsonp_${Date.now()}`
    window[callbackName] = (data) => {
      resolve(data)
      delete window[callbackName]
      script.parentNode.removeChild(script)
    }

    let script = document.createElement('script')
    script.src = `${url}&callback=${callbackName}`
    document.body.appendChild(script)
  })
}

我们通过传入需要跨域请求的URL和数据，使用Promise进行封装，当回调函数获取到数据时，我们通过Promise的resolve方法将数据返回，并删除回调函数及其元素。

下面给出两个使用Promise封装jsonp的示例：

示例一：

jsonp('https://api.xxxx.com/getStations', {province: '江苏'})
  .then((data) => {
    // 解析数据
  })
  .catch((err) => {
    // 处理错误
  })

示例二：

let QueryWeather = {}

QueryWeather.getWeatherList = function (city) {
  return jsonp('http://wthrcdn.etouch.cn/weather_mini', {city: city})
    .then((data) => {
      // 解析数据
    })
    .catch((err) => {
      // 处理错误
    })
}

export default QueryWeather

总结

在Vue中，我们可以利用Promise封装jsonp实现跨域请求，并通过链式调用的方式方便处理数据和错误。使用Promise封装jsonp可以大大简化代码的复杂度，增强代码的可维护性和复用性。