iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中jsonp的使用方法
  • 864
分享到

vue中jsonp的使用方法

2024-04-02 19:04:59 864人浏览 泡泡鱼
摘要

目录1、前言2、安装3、使用4、Vue文件使用1、前言 最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使用JSONp来实现。jsonp原理可以自行

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的使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中jsonp的使用方法

本文链接: https://www.lsjlt.com/news/157494.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中jsonp的使用方法
    目录1、前言2、安装3、使用4、vue文件使用1、前言 最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使用jsonp来实现。jsonp原理可以自行...
    99+
    2024-04-02
  • vue-jsonp的使用及说明
    目录vue-jsonp的使用安装使用vue文件使用vue+jsonp跨域vue-jsonp的使用 最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使...
    99+
    2022-12-08
    vue-jsonp的使用 使用vue-jsonp vue-jsonp
  • vue中使用TypeScript的方法
    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集,并支持了泛型、类型、命名空间、枚举等特性...
    99+
    2024-04-02
  • Vue中orEach()的使用方法
    这篇文章主要介绍了Vue中orEach()的使用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言在前端开发中,经常会遇到一些通过遍历循环来获取想要的内容的情形,而且这种...
    99+
    2023-06-15
  • vue中this.$createElement方法的使用
    目录vue this.$createElement方法关于createElement使用实例参数说明使用示例源码解读vue this.$createElement方法 element...
    99+
    2024-04-02
  • vue中的mixins混入使用方法
    目录mixinsmixins理解使用方法全局混入局部混入mixins的使用方法的复用方法的覆盖合并生命周期mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的...
    99+
    2024-04-02
  • Vue中使用Teleport的方法示例
    目录正文Teleport 在 Vue 中的使用禁用 Teleport 标签正文 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中。但是,有时我们并不希望如此...
    99+
    2022-11-13
    Vue使用Teleport Vue Teleport
  • vue项目中使用TDesign的方法
    目录前言:一、使用vue-cli手脚架创建vue项目二、配置vue及vue模板编译器版本三、安装tdesign-vue和less四、测试常见错误前言: 本文只介绍如何在vue项目中配...
    99+
    2023-05-15
    vue使用TDesign vue TDesign
  • Vue中XMLHttpRequest的使用方法详解
    Vue中使用XMLHttpRequest(XHR)来获取数据的方式与传统的HTML页面相同。以下是Vue中XMLHttpRequest的详细使用方法: 1.创建XMLHttpRequ...
    99+
    2023-05-19
    Vue XMLHttpRequest使用方法 Vue XMLHttpRequest Vue XMLHttpRequest
  • vue中Promise的使用方法详情
    目录一、使用1.promise是一种异步解决方案2.async await简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果...
    99+
    2024-04-02
  • Vue中使用TailwindCSS的具体方法
    目录1. 快速使用2. 快速了解 Tailwind CSS 类3. 在 Tailwind CSS 中使用 flex 布局4. 实现常见的布局5. 实现黑白主题切换6. Tailwin...
    99+
    2023-05-14
    Vue使用Tailwind CSS Vue Tailwind CSS
  • vue中混入mixins的使用方法
    目录前言使用方法总结前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的。同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如...
    99+
    2024-04-02
  • JSONP如何在java中使用
    这篇文章给大家介绍JSONP如何在java中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 json和JSONP这二者在开发中还是很常见的,此处JSON暂且不说。一个众所周知的问题,Ajax直接请求普通文...
    99+
    2023-05-31
    java jsonp ava
  • VUE中的filters过滤器使用方法
    目录前言一、全局过滤器1、全局过滤器之单一挂载2、全局过滤器之批量挂载二、组件过滤器前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双...
    99+
    2024-04-02
  • vue3中vue-meta的使用方法解析
    目录vue-meta的使用方法1.安装2.一般使用方法3.与vuex,vue-route结合使用使用vue-meta处理元信息vue-meta有以下特点如何使用vue-meta的使用...
    99+
    2024-04-02
  • vue-router中关于children的使用方法
    目录关于children的使用children的使用场景router配置中children配置不起作用关于children的使用 children的使用场景 比如页面左侧显示菜单,右...
    99+
    2024-04-02
  • swiper在vue中的简单使用方法
    本次使用的是 swiper5,swiper 不同版本在使用 的过程会有一些差别 说明:本次示例中 skuImageList 是图片列表,由父组件从服务器获取然后传给这个轮播子组件使...
    99+
    2024-04-02
  • Vue中watch使用方法详解
    目录前言watchimmediate和handlerdeep拓展前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他...
    99+
    2023-01-28
    Vue watch用法 Vue watch原理
  • vue data中的return使用方法示例
    目录一、vue 里面的data return 是什么?二、如何使用1.vue 双向绑定 v-model2.带有 ":"的属性 比如:class、:id等等3. 标...
    99+
    2024-04-02
  • vue中使用postcss-px2rem的两种方法
    目录如何使用:1.安装2.设置vue项目中使用postcss-px2rem的2种方法 在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作