vue-jsonp的使用及说明

更新时间：2022年12月06日 09:19:53 作者：sunddy_x

这篇文章主要介绍了vue-jsonp的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-jsonp的使用

最近在做手写输入法时遇到跨域问题，使用的是qq输入法的接口，代理无法实现效果，这里使用jsonp来实现。

jsonp原理可以自行百度，这里记录一下vue-jsonp的使用和踩的一点小坑，官方文档请前往npm地址。

安装

npm install vue-jsonp -S

或者

yarn add vue-jsonp

使用

mian.js引用

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

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

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跨域

npm install vue-jsonp --save

main.js中添加

import { VueJsonp } from 'vue-jsonp'

使用

  this.$jsonp('http://127.0.0.1:8085/api/api/' , {
     }).then((res)=>{
       console.log(res)
     })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-cli2与vue-cli3在一台电脑共存的实现方法
这篇文章主要介绍了vue-cli2与vue-cli3在一台电脑共存的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
利用vite创建vue3项目的全过程及一个小BUG详解
Vite作为一个构建工具,提供了一种快速的方法来构建Vue应用,而Vue3 则是一个前端框架,提供了强大的功能来构建和管理前端项目,下面这篇文章主要给大家介绍了关于利用vite创建vue3项目的全过程及一个小BUG的相关资料,需要的朋友可以参考下
2023-04-04
Vue.js更改调试地址端口号的实例
今天小编就为大家分享一篇Vue.js更改调试地址端口号的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现在data里引入相对路径
这篇文章主要介绍了vue实现在data里引入相对路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue3属性绑定方法解析
这篇文章主要介绍了Vue3属性绑定方法解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
vue 递归组件的简单使用示例
这篇文章主要介绍了vue 递归组件的简单使用示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
Vue.js中兄弟组件之间互相传值实例
本篇文章主要介绍了Vue.js中兄弟组件之间互相传值实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法
本文主要介绍了Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
vue中多路由表头吸顶实现的几种布局方式
这篇文章主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue 处理跨域问题及解决方法小结
跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧
2021-09-09