详解如何在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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
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
那些年一起学习的PHP(三)
2012/03/22 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
linux下编译安装memcached服务
2014/08/03 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
javascript工具库代码
2012/03/29 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
JS实现css hover操作的方法示例
2017/04/07 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
TensorFlow实现iris数据集线性回归
2018/09/07 Python
wxPython实现画图板
2020/08/27 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
keras K.function获取某层的输出操作
2020/06/29 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
管理部部长岗位职责
2013/12/05 职场文书
与美同行演讲稿
2014/09/13 职场文书
学生检讨书如何写
2014/10/30 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android