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 面向对象思想 附源码
Jul 07 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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
短波问题解答
2021/02/28 无线电
德生PL550的电路分析
2021/03/02 无线电
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
经验几则 推荐
2006/09/05 Javascript
javascript FormatNumber函数实现方法
2008/12/30 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python爬虫常用的模块分析
2014/08/29 Python
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
基于python的列表list和集合set操作
2019/11/24 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
学术会议邀请函
2015/01/30 职场文书
红色电影观后感
2015/06/18 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis