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、創建一個函數處理地址

 
 
 
         

  
  
  
          
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 = '這個是你想要挖掘的地址'  ；

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

    const data = Object.assign({},commonParams, //這些參數都是可以在network Header 下 
   	query string parameters
　　　　　　platform:'h5',
　　　　　　uin:0,
　　　　　　needNewCode:1
　　　　})

　　　　return jsonp(url,data,options)
　　}

3. 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 type="text/ecmascript-6">

  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>

<style lang="scss">

#app {

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

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  /*color: #2c3e50;*/

}

</style>

VUE解決axios跨域問題