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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
js前端设计模式优化50%表单校验代码示例
Jun 21 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php blowfish加密解密算法
2016/07/02 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
操行评语大全
2014/04/30 职场文书
小学班主任培训方案
2014/06/04 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
MySQL分库分表详情
2021/09/25 MySQL