vue中jsonp的使用方法

目录
  • 1、前言
  • 2、安装
  • 3、使用
  • 4、vue文件使用

1、前言

最近在做手写输入法时遇到跨域问题，使用的是qq输入法的接口，代理无法实现效果，这里使用jsonp来实现。jsonp原理可以自行百度，这里记录一下vue-jsonp的使用和踩的一点小坑，官方文档请前往npm地址。

2、安装

npm install vue-jsonp -S

或者

yarn add vue-jsonp

3、使用

mian.js引用

// main.js
import Vue from 'vue'
import { VueJsonp  } from 'vue-jsonp'
Vue.use(VueJsonp) // $jsonp被挂载到vue原型上,可直接使用vm.$jsonp()

注意：此处包版本为 2.0.0 ，导入时注意使用 { } 解构赋值，网上有部分教程为老版本，有需要可以前往前言中的npm官方地址，有具体使用教程。

4、vue文件使用

this.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
}).then(res => {
  // 此处代码不执行
  // 因为会直接调用返回的那个回调函数
})

假设返回的函数名称为callbackFun，需要 在window对象上绑定 callbackFun函数

mounted() {
  // 将callbackFun方法绑定到window对象
  window['callbackFun'] = (data) => {
    cosole.log('定义的回调函数')
  }
  // 假设返回的为callbackFun.ajax_callback()
  window['callbackFun'] = {
    ajax_callback: function (res) {
      cosole.log('定义的回调函数')
    }
  }
}

注意：jsonp请求方式仅为 get

到此这篇关于vue中jsonp的使用方法的文章就介绍到这了,更多相关vue中jsonp的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中jsonp插件的使用方法示例

    通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback <template> <div class="sky"> <h3>获取城市:</h3> <div class="skycon"></div> </div> </template> <script> //导入jsonp插件 import jsonp from 'jsonp';

  • Vue项目中使用jsonp抓取跨域数据的方法

    下载jsonp npm install jsonp 在js文件夹下新增一个jsonp.js,来封装一个jsonp() 如何封装一个jsonp() 在下载的jsopn中,jsonp(url,options,callback)这个是原生jsonp方法中的参数: 引入下载的jsonp import originJsonp from 'jsonp': 导出自己定义的jsonp函数 //这个jsonp函数是我们自己定义的,与上面的originJsonp不是同一个,originJsonp是一个可以直接引用的

  • 在vue中使用jsonp进行跨域请求接口操作

    前言: 这里我们使用的是第三方插件jsonp. github网址:https://github.com/webmodules/jsonp 1.安装 npm install jsonp -S 2.引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import. 1.新建jsonp.js文件来封装原始jsonp插件 // 引入原始jsonp插件 import originJsonp f

  • vue使用jsonp抓取qq音乐数据的方法

    1.安装jsonp npm install jsonp 2.创建jsonp.js文件,内容如下: import originJSONP from 'jsonp' /** * 封装jsonp * @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装 * @param {obj} data 参数 * @param {*} option jsonp的option */ export default function jsonp (u

  • VUE2.0中Jsonp的使用方法

    VUE2.0中Jsonp的使用方法

    本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的

  • vue基础之使用get、post、jsonp实现交互功能示例

    vue基础之使用get、post、jsonp实现交互功能示例

    本文实例讲述了vue基础之使用get.post.jsonp实现交互功能.分享给大家供大家参考,具体如下: 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>

  • vue中jsonp的使用方法

    vue中jsonp的使用方法

    目录 1.前言 2.安装 3.使用 4.vue文件使用 1.前言 最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使用jsonp来实现.jsonp原理可以自行百度,这里记录一下vue-jsonp的使用和踩的一点小坑,官方文档请前往npm地址. 2.安装 npm install vue-jsonp -S 或者 yarn add vue-jsonp 3.使用 mian.js引用 // main.js import Vue from 'vue' import { Vu

  • 在Vue中使用echarts的方法

    上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我

  • vue中使用cropperjs的方法

    用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropperjs -save 在template里: <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel">

  • vue中实现methods一个方法调用另外一个方法

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时候  this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • vue中使用vue-pdf的方法详解

    需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示 注: 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历.有多少页就加载了多少个pdf组件. 2.pdf文件存在跨域问题,这个需要后端同学支持. 3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <template> <div class="pdf_wrap"> <div class="pdf_li

  • vue中使用TypeScript的方法

    vue中使用TypeScript的方法

    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能.TypeScript 是 JS类型的超集,并支持了泛型.类型.命名空间.枚举等特性,弥补了 JS 在大型应用开发中的不足. 在单独学习 TypeScript时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React.Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍,需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义.组件的书写

随机推荐