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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
js实现购物车功能
Jun 12 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
同学聚会主持词
2014/03/18 职场文书
目标管理责任书
2014/04/15 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
竞聘书的秘诀
2019/04/02 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js