VUE2.0中Jsonp的使用方法


Posted in Javascript onMay 22, 2018

本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据。

1.JSONP的用途和原理

使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域。

2.JSONP的使用方法

2.1 引入github的jsonp

打开项目>package.json>在”dependencies”下添加代码

"jsonp": "^0.2.1"

VUE2.0中Jsonp的使用方法

如图所示,然后执行安装cmd指令,并重新运行项目

npm install 
 npm run dev

2.2 封装jsonp.js

import originJSONP from 'jsonp'
export default function jsonp(url, data, option) {
 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
 return new Promise((resolve, reject) => {
 originJSONP(url, option, (err, data) => {
  if (!err) {
  resolve(data)
  } else {
  reject(err)
  }
 })
 })
}
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) : ''
}

目录结构如下:

VUE2.0中Jsonp的使用方法

2.3 jsonp.js的API调用

在src的文件夹下创建api文件夹,用于储存api调用的js,新建config.js和recommend.js两个文件。

config.js
export const commonParams = {
 g_tK: 5381,
 inCharset: 'utf-8',
 outCharset: 'utf-8',
 notice: 0,
 format: 'jsonp'
}
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0
recommend.js
import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'
export function getRecommend() {
 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //此处的url可以自行修改,本文是qq音乐链接
 const data = Object.assign({}, commonParams, {
 platform: 'h5',
 uin: 0,
 needNewCode: 1
 })
 return jsonp(url, data, options)
}

目录结构如下:

VUE2.0中Jsonp的使用方法

2.4 recommend.vue文件调用

在项目目录下的src>components>recommend>对应的文件.vue

recommend.vue

<template>
 <div class="recommend">
  recommend
 </div>
</template>
<script type="text/ecmascript-6">
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default {
 name: 'recommend',
 created() {
 this._getRecommend()
 },
 methods: {
 _getRecommend() {
  getRecommend().then((res) => {
  if (res.code === ERR_OK) {
   console.log(res.data.slider)
  }
  })
 }
 }
}
</script>

2.5 页面jsonp请求成功结果

VUE2.0中Jsonp的使用方法

以上为vue2.0 jsonp简单使用方式,实例下载链接

总结

以上所述是小编给大家介绍的VUE2.0中Jsonp的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 #Javascript
基于mpvue的小程序项目搭建的步骤
May 22 #Javascript
安装vue-cli的简易过程
May 22 #Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
Angular网络请求的封装方法
May 22 #Javascript
You might like
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
python爬取m3u8连接的视频
2018/02/28 Python
pandas通过索引进行排序的示例
2018/11/16 Python
浅析Python 责任链设计模式
2020/09/11 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
大专生自我鉴定范文
2013/10/01 职场文书
初中学生评语大全
2014/04/24 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
文明家庭事迹材料
2014/12/20 职场文书
小学生通知书评语
2014/12/31 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS