Vue2.x 通過后端接口代理方法獲取PC端推薦歌單

在QQ音樂api接口有時候不能直接通過Jsonp訪問,可通過后端代理獲取,這里是通過axios獲取

這里是: axios GitHub地址,具體可訪問學習,本文僅記錄Vue2.x 通過后端接口代理方法獲取PC端推薦歌單。

1. npm install axios -S
2. build/webpack.dev.conf.js文件
// 開始引入 axios
const axios = require('axios') 
// devServer 里添加
  before(app) {
      app.get('/getDiscList', function (req, res) {
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://y.qq.com/'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })
    }
3. 在api里的js文件里:將方法里的url替換成步驟2里自定義的接口,即 '/getDiscList',再通過axios獲取返回的數(shù)據(jù)。
// 文件路徑:api/recommend
export function getDiscList() {
  const url = '/getDiscList'
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    picmid: 1,
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}
4. 組件里的調(diào)用
 import {getDiscList} from 'api/recommend'

 export default {
   data() {
      return {
        discList: []
      }
    },
    created() {
      this._getDiscList()
    },
    methods: {
      _getDiscList() {
         getDiscList().then((res) => {
          if (res.code === ERR_OK) {
           //  console.log(res.data.list)
            this.discList = res.data.list
          }
        })
      }      
    }
  }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容