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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
原生js实现简单轮播图
Oct 26 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开发的一些注意点总结
2010/10/12 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
js a标签点击事件
2017/03/30 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python eval函数介绍及用法
2020/11/09 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
心理健康活动总结
2014/04/30 职场文书
大雁塔导游词
2015/02/04 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python