音乐播放器项目记录

import originJSONP from 'jsonp'
export default function jsonp(url, data, option) {
  <!-- 地址判断和调用处理地址函数 -->
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  <!-- 返回一个Promise -->
  return new Promise((resolve, reject) => {
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

<!-- 把data拼接到url上 -->
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) : ''
}

import jsonp from 'common/js/jsonp'   // jsonp.js文件地址
import {commonParams, options} from './config'  //把congfig.js 对象导入进来
export function getRecommend() {
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'  //这个是你想要抓取数据的地址

    const data = Object.assign({}, commonParams, {
        platform: 'h5',
        uin: 0,
        needNewCode: 1
    })

    return jsonp(url, data, options)
}

export const commonParams = {
    g_tk: 5381,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    format: 'jsonp'
}

export const options = {
    param: 'jsonpCallback'
}

export const ERR_OK = 0  // 语义化

<template>
    <div class="recommend">
        <div class="recommend-content">
            <div class="slider-wrapper">
            </div>
            <div class="recommend-list">
                <h1 class="list-title">热门歌单推荐</h1>
                <ul>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {getRecommend} from 'api/recommend'
    import {ERR_OK} from 'api/config'

    export default {
        created () {
           this._getRecommend()
        },
        methods: {
            _getRecommend() {
                getRecommend().then((res) => {
                    if (res.code === ERR_OK) {         //语义化
                        console.log(res.data.slider)
                    }
                })
            }
        }
    }
</script>