vue中jsonp的使用方法
更新时间：2021年11月17日 08:48:56 作者：sunddy_x
这篇文章主要介绍了vue中jsonp的使用方法,文章从安装开始展开具体的vue中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的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现列表倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能,本文主要介绍了Vue3中嵌套路由和编程式路由的实现,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue使用watch监听器的基本使用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
上传文件和下载文件是我们平时经常用到的功能，接下来就让我们用SpringBoot，Vue3和ElementPlus组件实现文件的上传和下载功能吧，感兴趣的朋友跟随小编一起看看吧2023-01-01
本文主要介绍了Vue不定高展开动效原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了Vue 监视属性之天气案例实现，文章以天气为例展开介绍Vue 监视属性 的相关内容，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了vue自定义指令和动态路由实现权限控制的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-08-08
在vue2的响应式中,存在着添加属性、删除属性、以及通过下标修改数组,但页面不会自动更新的问题,而这些问题在vue3中都得以解决,本文就给大家详细的介绍一下Vue响应式数据原理,感兴趣的小伙伴跟着小编一起来看看吧2023-08-08
这篇文章主要介绍了vue动态添加store、路由和国际化配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文主要介绍了Vue.js结合SortableJS实现树形数据拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论