vue 2.0 实战移动音乐app（二）jsonp的应用+轮播图数据的抓取

最新推荐文章于 2022-04-20 10:20:36 发布

weixin_42424660

最新推荐文章于 2022-04-20 10:20:36 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42424660/article/details/83961041

本文介绍在Vue项目中如何使用axios或jsonp调用API获取轮播图数据，并展示了一个具体的实现示例，包括数据抓取和处理的代码片段。

1.在recommend.vue中，created时进行数据抓取

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

调用了getRecommend()函数，专门用来获取轮播图数据。注意此处引用函数的路径也需要配置别名'api'

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

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

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

  return jsonp(url, data, options)
}