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 相关文章推荐
JavaScript数组迭代器实例分析
Jun 09 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
JavaScript手机振动API
Jun 11 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
element中的$confirm的使用
Apr 26 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP安装问题
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/11/17 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python交换变量
2008/09/06 Python
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python实现Zabbix-API监控
2018/09/17 Python
python实现AES加密和解密
2019/03/27 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python如何安装下载后的模块
2020/07/03 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
求职信模板怎么做
2014/01/26 职场文书
排球赛新闻稿
2015/07/17 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书