vue项目中jsonp抓取数据实现方式

393 阅读1分钟
先安装依赖:cnpm install --save jsonp

具体代码如下:

1. 然后创建一个jsonp.js
import originJSONP from 'jsonp'  //引用jsonp  
export default function jsonp(url,data,options){    
//地址判断和调用处理地址函数    
  url +=(url.indexOf('?')<0?'?':'&')+param(data)   
 //返回一个Promise   
 return new Promise((resolve,reject)=>{   
   originJSONP(url,options,(err,data)=>{  
//用原始的jsonp调用有三个参数  
   f(!err){       
      resolve(data)         
      }else{      
   reject(err)      
   }    
  })   
 }) 
}  
//创建一个函数处理地址 
 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):''  }

2.自己创建个api文件夹
//创建一个recomm.js,config  主要用途是处理请求地址url和头部的公共参数  代码如下: 
引入刚的jsonp.js   
import jsonp from 'jsonp.js文件地址';  
import {commonParams,options}  from 'config.js 文件地址'  
//把congfig.js 对象导入进来  
export function getRemented(){    
const url = '这个是你想要挖掘的地址'  ;   
const data = Object.assign({},commonParams,{ 
     //这些参数都是可以在network Header 下 query string parameters有     
     platform:'h5', 
     uin:0, 
     needNewCode:1 
    })    
return jsonp(url,data,options)  
}   

2. config.js //用途把公共的参数提取出来,代码如下:
export const commonParams = { 
   g_tk:5318,      
    inCharset: 'utf-8',      
    outCharset:'utf-8',    
    notice:0,   
   format:'jsonp'    
}    

export const options = { 
  param:'jsonpCallback'    
}     

export const ERR_OK = 0;  

 //在自己的模块中调用 既可以看到数据
<template>  
    <div id="app">  
    </div>
</template>

<script>  
import{getRemented} from '../../api/recomm'  
import {ERR_OK} from '../../api/config'  

export default{      
    data(){
          return{}      
    },      
    created(){  
        this._getData();     
     },     
    methods:{   
       _getData(){          
          getRemented().then((res)=>{        
              if(res.code===ERR_OK){               
                 console.log(res.data)
                }
             })        
          }    
        }  
      }
</script>