jsonp封装使用（二）

原理：不是ajax请求，是动态创建script标签进行跨域的，将script的src指向我们请求的服务端地址，npm安装jsonp,axios，编写jsonp.js引入jsonp，并对原来的jsonp做一个简单的封装

1. src->common->js中，编写jsonp.js，引入jsonp插件，并对其做一个简单的封装

import originJsonp from 'jsonp'
 
// url是一个地址，请求通过data拼接到url上，并返回一个promise
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)
      }
    })
  })
}
 
// 对要与url拼接的data进行处理
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) : ''
}

用promise对原生的jsonp进行封装之后，即可用jsonp真实的抓取我们的线上数据，获取数据通常会获取一些方法，在src-api目录下给每一个部分封装获取它相关数据的方法，我们这里做的是推荐相关，所以在这里建一个recommend.js，实现getRecommend方法，这个方法的原理就是利用jsonp获取数据，所以要先import jsonp，首先要定义url，data指的就是Query String Parameters，我们将相同的参数进行封装，所以在configure.js中进行公共参数的封装

2. 在api->config.js中统一参数格式

export const commonParams = {
    g_tk: 1251607169,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    format: 'jsonp'
}
 
export const options = {
    param: 'jsonpCallback'
}
 
// "code":0,正确的值为0
export const ERR_OK = 0

3. 引入jsonp.js和conifg.js，编写recommend.js获取jsonp数据

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

export function getRecommend() { // 利用jsonp抓取推荐数据
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
    const data = Object.assign({}, commonParams, { // assign合并对象
        platform: 'h5',
        uni: 0,
        needNewCode: 1
    })
 
    return jsonp(url, data, options)
}

4.在recommend.vue中接收并处理recommend.js获取的数据，getDiscList是后来获取的歌单列表

import {getRecommend} from 'api/recommend' // 引入js中定义的方法
import {ERR_OK} from 'api/config'

data() {
    return {
      recommends: [],
      discList: []
    }
  }

created() {
  //  setTimeout(() => {
  //    this._getRecommend() 
  //  }, 2000);
    this._getRecommend() 
    // 模拟loading效果
  },
  methods: {
    _getRecommend() {
      getRecommend().then((res) => { // res对应的就是json对象，之前已经import该方法了
        if (res.code === ERR_OK) {
          // console.log(res.data.slider)
          this.recommends = res.data.slider
        }
      })
    }

}

5.引入

转自https://blog.csdn.net/qq_22317389/article/details/80506286

jsonp封装使用（二）

猜你喜欢