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

(编辑:jimmy 日期: 2024/11/17 浏览:2)

  • 下载jsonp npm install jsonp
  • 在js文件夹下新增一个jsonp.js,来封装一个jsonp()

如何封装一个jsonp()

在下载的jsopn中,jsonp(url,options,callback)这个是原生jsonp方法中的参数;

引入下载的jsonp

import originJsonp from 'jsonp';

导出自己定义的jsonp函数

//这个jsonp函数是我们自己定义的,与上面的originJsonp不是同一个,originJsonp是一个可以直接引用的方法;她最        

终返回一个Promise对象

 export default function jsonp(url, data, option){
  return new Promise((resolve,reject)=>{
  //调用originJsonp()来抓取数据
   originJsonp(url,option,(err,data)=>{ //callback是抓取数据结果
    if(!err){
    resolve(data)
    }ese{
    reject(err)
    }
   })
  })
}

在抓取的数据URL中常常会有参数传入,但是这些参数是对象格式,但是我们传入到originJsonp方法中的参数是拼接到url后面的,所以不能是对象的格式,这时就需要将对象格式的参数拼接到url后面组成新的URL

类似这样的一个url:( https://www.baidu.com/s"htmlcode">

ie:utf-8,
       rsv_bp:1
      }
export function param(data){
let urlData='';
for(let key in data){
 let value = data[k] !== undefined "htmlcode">
export default function jsonp(url, data, option) {
  return new Promise((resolve,reject)=>{
   //调用跨域请求函数
   //对URL进行拼接,首页需要判断URL后面是否有“?”,如果有这需要给param(data)添加“&”,不然需要给param(data)添加“?”
   url = url.indexOf('"color: #ff0000">总结

以上所述是小编给大家介绍的Vue项目中使用jsonp抓取跨域数据的方法,希望对大家有所帮助!

一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。