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


Posted in Javascript onJune 18, 2019

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>

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

总结

以上所述是小编给大家介绍的vue中利用Promise封装jsonp并调取数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
javascript中this的四种用法
May 11 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 #Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 #Javascript
小程序click-scroll组件设计
Jun 18 #Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 #Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 #Javascript
JS删除String里某个字符的方法
Jan 06 #Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 #Javascript
You might like
php中socket的用法详解
2014/10/24 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
pandas object格式转float64格式的方法
2018/04/10 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python matplotlib库的基本使用
2020/09/23 Python
日语求职信范文
2013/12/17 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
销售人员获奖感言
2014/02/05 职场文书
学历公证委托书
2014/04/09 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2014年保管员工作总结
2014/11/18 职场文书
向女朋友道歉的话
2015/01/20 职场文书
大连星海广场导游词
2015/02/10 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
用python批量解压带密码的压缩包
2021/05/31 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python