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

因为最近在做vue的项目，在前端做数据的时候遇到了数据抓取的难题，查了一些资料，自己也研究了一下，总体来说是搞出来了（基于黄奕老师的项目找出来的经验），废话不多说，直接上代码

----------------------------------------------------

先安装依赖：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调用有三个参数

　　　　　　　　if(!err){

　　　　　　　　　resolve(data)

　　　　　　　　}else{

　　　　　　　　　reject(err)

　　　　　　　　}

　　　　　　})

　　　　})

　　}

2、创建一个函数处理地址

  1 function param(data){

  2

  3   let url = '';

  4

  5   for(var k in data){

  6

  7     let value = data[k]!==undefined?data[k]:'';

  8

  9     url +=`&${k}=${encodeURIComponent(value)}`;  //地址拼接参数

 10

 11   }

 12     return url ? url.substring(1):''

 13 }

2.自己创建个api文件夹，创建一个recomm.js，config  主要用途是处理请求地址url和头部的公共参数，引入刚刚的jsonp.js

代码如下：

  1   import jsonp from '' // jsonp.js文件地址；

  2

  3   import {commonParams,options}  from 'config.js 文件地址'  //把congfig.js 对象导入进来

  4

  5   export function getRemented(){

  6

  7     const url = '这个是你想要挖掘的地址'  ；

  8

  9    //例如我想要的地址是：https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg

 10

 11     const data = Object.assign({},commonParams, //这些参数都是可以在network Header 下

 12    	query string parameters

 13 　　　　　　platform:'h5',

 14 　　　　　　uin:0,

 15 　　　　　　needNewCode:1

 16 　　　　})

 17

 18 　　　　return jsonp(url,data,options)

 19 　　}

 20

 21

3. config.js //用途把公共的参数提取出来

代码如下：

  1 export const commonParams = {

  2   g_tk:5318,

  3   inCharset: 'utf-8',

  4   outCharset:'utf-8',

  5   notice:0,

  6   format:'jsonp'

  7 }

  8 export const options = {

  9   param:'jsonpCallback'

 10 }

 11 export const ERR_OK = 0;

 12

 13 //在自己的模块中调用 既可以看到数据

 14

 15 <template>

 16   <div id="app"></div>

 17 </template>

 18

 19 <script type="text/ecmascript-6">

 20

 21   import{getRemented} from '../../api/recomm'

 22

 23   import {ERR_OK} from '../../api/config'

 24

 25   export default{

 26       data(){

 27           return{}

 28       },

 29       created(){

 30           this._getData();

 31       },

 32      methods:{

 33           _getData (){

 34 	  getRemented ().then((res)=>{

 35 	    if(res.code===ERR_OK){

 36               console.log(res.data)

 37              }

 38           })

 39        }

 40      }

 41   }

 42

 43 </script>

 44

 45 <style lang="scss">

 46

 47 #app {

 48

 49   font-family: 'Avenir', Helvetica, Arial, sans-serif;

 50

 51   -webkit-font-smoothing: antialiased;

 52

 53   -moz-osx-font-smoothing: grayscale;

 54

 55   text-align: center;

 56

 57   /*color: #2c3e50;*/

 58

 59 }

 60

 61 </style>

 62

 63

VUE解决axios跨域问题

巴特西

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

最新文章

热门文章