四十、vue中封装jsonp

最新推荐文章于 2025-05-23 06:48:24 发布

原创最新推荐文章于 2025-05-23 06:48:24 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #javascript #vue #封装

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并封装jsonp模块，实现跨域数据请求。通过安装依赖包并进行代码封装，创建了一个简洁易用的JSONP请求函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装jsonp

"dependencies": {
  "vue": "^2.3.3",
  "vue-router": "^2.5.3",
  "vuex": "^2.3.1",
  "fastclick": "^1.0.6",
  "vue-lazyload": "1.0.3",
  "axios": "^0.16.1",
  "jsonp": "0.2.1"
},

二、封装

import originJsonp from 'jsonp'

// 封装一个JSONP
export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}