详解如何在Vue项目中发送jsonp请求


Posted in Javascript onOctober 25, 2019

起因

公司临时要支撑河南的一个项目,做一个单点登录的功能。

简单来说,就是以下3步

客户方点击某个按钮进入我们的页面a

在页面a中由前端发送一个jsonp请求到客户方,得到一个token值

前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已登陆,若登陆则根据取到的工号等信息后端模拟登陆,若没有登陆,则跳转到客户方登陆页面

怎么做

发送jsonp请求,axios官方貌似并不支持,所以排除??‍♀️

经过辗转Google,发现了*vue-jsonp*这个插件

使用vue-jsonp

官方地址:vue-jsonp

下载

npm install vue-jsonp --save-dev

引入项目

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

然后,我们就可以在项目中愉快地使用啦✨✨

项目中xxx.vue文件

<script>
export default {

  data() {...},
  created() {
    // 
    this.getJson()
  },
  mounted() {
    window.jsonpCallback = (data) => {
      console.log(data.token)
      // 调用获取后端token的方法
      this.getToken(data.token)
    }
  },
  methods: {
    getJson() {
     this.$jsonp(this.url, {
      callbackQuery: "callbackParam",
      callbackName: "jsonpCallback"
     })
      .then((json) => {
      // 返回的jsonp数据不会放这里,而是在 window.jsonpCallback
       console.log(json)
      })  
    },
    
    getToken(token) {
      this.axios.post('/xxxurl')
        .then((res) => {
          // success 之后就正常登陆了
        })
    
    }
  
  }
 }  
</script>

是不是so easy ?但是真的整了一晚上才整出来,谁能知道jsonp的返回值在then里返回不了呢,打印也打印不出来。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
layui实现form表单同时提交数据和文件的代码
Oct 25 #Javascript
vue实现弹幕功能
Oct 25 #Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 #Javascript
layui form表单提交后实现自动刷新
Oct 25 #Javascript
jquery实现购物车基本功能
Oct 25 #jQuery
vue中@change兼容问题详解
Oct 25 #Javascript
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
thinkphp缓存技术详解
2014/12/09 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
老公保证书范文
2014/04/29 职场文书
供电工程专业求职信
2014/08/09 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
教师学习心得体会范文
2016/01/21 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers