vue項目中jsonp抓取數據實現方式

 

先安裝依賴：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)　　　
　　　　　　　　}

　　　　　　})

　　　　})
　　}

　　//建立一個函數處理地址

　　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)

　　}

 

　　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 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>