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


    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>
    

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

  • 相关阅读:
    OGNL与值栈
    Struts2的数据封装
    Struts2页面配置和访问servlet API
    Struts2入门介绍(二)
    Struts2 入门介绍(一)
    Hibernate批量抓取
    Problem G: STL——整理唱片(list的使用)
    STL详细介绍(更新中~~~)
    Problem E: 数量的类模板
    CF: Long Number
  • 原文地址:https://www.cnblogs.com/wangzirui98/p/11039021.html
Copyright © 2020-2023  润新知