欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中利用Promise封装jsonp并调取数据

程序员文章站 2024-01-11 22:46:10
Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功)、Rejected(失败)两个结果。 这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。 用Promise封 ......

promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是pending(进行),第二个阶段就是结果阶段,包含fulfilled(成功)、rejected(失败)两个结果。

这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。

new promise((resolve,reject)=>{
  相应操作
  if(异步操作成功){
    resolve(value)
  }else{
    reject(error)
  }
}).then(value=>{
  // 成功后操作
},error=>{
  // 失败后操作     
})

用promise封装jsonp方法

import originjsonp from 'jsonp'
// 这时候url是不带参数的,我们让data变成参数,data在具体定义获取具体内容的时候再单独配置
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)
      }
    })
  })
}
// 将data数据遍历,前提data是一个数组
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) : ''
}

定义一个重复比较多的配置文件config.js

export const commonparams = {
  g_tk: 5381,
  incharset: 'utf-8',
  outcharset: 'utf-8',
  notice: 0,
  format: 'jsonp'
}

// jsonp默认的options就是jsonpcallback
export const options = {
  param: 'jsonpcallback'
}
export const err_ok = 0

然后再进行获取页面方法的封装

import jsonp from 'common/js/jsonp'
import { commonparams, options } from './config'
export function getrecommend() {
  // 获取qq音乐的地址
  const url =
    'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
  // object.assign()方法来合并commonparams对象和后面的对象
  const data = object.assign({}, commonparams, {
    platform: 'h5',
    uin: 0,
    neednewcode: 1
  })
  // 最后返回的是
  return jsonp(url, data, options)
}

再相应组件中进行调用

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

然后就可以在控制台获得数据了