vue应用jsonp跨域访问api

前言：自己在做demo的时候需要数据的时候又不想自己写数据，只能到网上找别人的现成的数据做测试，但是找到好多的api都是需要跨域才能访问成功的。所以在vue的开发中就需要使用jsonp来实现了。下面是我最近爬的一些小坑，希望看到的人有所帮助。

1。安装vue-jsonp

 npm install vue-jsonp --save

2.在src文件夹中新建一个common文件夹 ->js文件夹 ->jsonp.js

jsop.js

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
    //url链接里面符号的处理
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

    return new Promise((resolve, reject) => {
        originJsonp(url, option, (err, data) => {
            if (!err) {
                resolve(data)
            } else {
                reject(err)
            }
        })
    })
}

export 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) : ''
}

3.现在就是写我们自己要访问的api公共类了 src->api文件夹（新建）->config.js

 3.1 config.js

//公共
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;

 3.2 recom.js（自己需要调用的）

import jsonp from 'common/js/jsonp'
import { commonParams, options } from './config'


// 获取推荐页面数据 接口
export function getRecom() {
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';

    let data = Object.assign({}, commonParams, {
        platform: 'h5',
        uin: 0,
        needNewCode: 1
    })
    return jsonp(url, data, options)
}

 

4.差不多准备工作都做完了就能开始调用jsop来调取数据了

 reom.vue

<template>
   <div class="recom">
        <!-- 1.轮播图 -->
    <swiper class="banner" :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in swiperOption.silideData" :key="index">
        <a :href="item.linkUrl">
          <img :src="item.picUrl" :alt="item.picUrl">
        </a>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 2.电台 -->
    <div class="mod_twocol_list">
      <h1 class="list_title">电台</h1>
      <ul class="list_container">
        <li class="js_play_radio" v-for="list in radioList" :data-id="list.radioid">
            <a href="javascript:;" class="list_main">
                <div class="list_media">
                  <img :src="list.picUrl" alt="">
                  <span class="icon icon_play"></span>
                </div>
                <div class="list_info">
                  <h2 class="list_tit tit_two_row">{{list.Ftitle}}</h2>
                </div>
            </a>
        </li>
      </ul>
    </div>
    <!-- 热门歌单 -->
    <div class="mod_twocol_list mod_twocol_list_special">
      <h2 class="list_title">热门歌单</h2>
      <ul class="list_container">
        <li data-tjname="recom_songlist" v-for="songlist in songList" >
         <a href="javascript:;" class="list_main js_gotaoge">
           <div class="list_media"> 
             <img :src="songlist.picUrl" alt="">
             <span class="icon icon_play"></span>
           </div>
           <div class="list_info">
              <h2 class="tit_two_row">{{songlist.songListDesc}}</h2>
            <p class="list_text">{{songlist.songListAuthor}}</p>
            </div>
         </a>
         <p>{{songlist.accessnum}}</p>
        </li>
      </ul>
    </div>
   </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";//轮播组件
import { getRecom } from "api/recom";
import { ERR_OK } from "api/config";
export default {
  data() {
    return {
      swiperOption: {
        // banner轮播配置和数据
        autoplay: true,
        pagination: {
          el: ".swiper-pagination"
        },
        silideData: [] // 数据
      },
      radioList: [],
      songList: []
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  created() {
    this._getRecom();
  },
  // computed: {
  //   swiper() {
  //     return this.$refs.mySwiper.swiper;
  //   }
  // },
  methods: {
    _getRecom() {
      getRecom().then(res => {
        if (res.code === ERR_OK) {
          this.swiperOption.silideData = res.data.slider; // 轮播数据
          this.radioList = res.data.radioList;
          this.songList = res.data.songList;
          console.log(this.swiperOption.silideData);
          console.log(this.songList.accessnum);
        }
      });
    }
  }
};
</script>

<style lang="less">
@import url("swiper/dist/css/swiper.css");//轮播swiper的自带css
.recom {
  height: 100%;
  width: 100%;
}
.banner {
  a,
  img {
    display: block;
    height: inherit;
    margin: 0 auto;
    width: 100%;
  }
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 6px;
    opacity: 0.2;
    transition: all 0.35s;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    // width: 20px;
    border-radius: 6px;
    background: #fff;
  }
}
.mod_twocol_list {
  margin: 14px 10px 0 10px;
  .list_title {
    font-size: 16px;
    color: #000;
    margin-bottom: 11px;
    font-weight: normal;
  }
  .list_container {
    overflow: hidden;
    margin-right: -8px;
    li {
      float: left;
      width: 50%;
      padding-right: 8px;
      margin-bottom: 10px;
      overflow: hidden;
      .list_media {
        position: relative;
        margin-bottom: 5px;
      }
      .list_info {
        padding: 0 7px 5px;
        color: #000;
        .list_tit {
          height: 36px;
          line-height: 18px;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: normal;
        }
      }
      img {
        width: 100%;
      }
    }
    .list_main {
      display: block;
      background: #fff;
    }
  }
}
.icon_play {
  position: absolute;
  display: block;
  z-index: 10;
  height: 24px;
  bottom: 5px;
  right: 5px;
  width: 24px;
  background-position: 0 0;
  background-image: url("../../assets/img/list_sprite.png");
  background-repeat: no-repeat;
  background-size: 24px 60px;
}
.tit_two_row {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}
.list_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
    font-size: 12px;
    margin-top:5px;
}
</style>