详解如何在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 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
js实现3D图片展示效果
Mar 09 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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
星际玩家的三大定律
2020/03/04 星际争霸
谈一谈收音机的高放电路
2021/03/02 无线电
PHP中feof()函数实例测试
2014/08/23 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
小程序自定义日历效果
2018/12/29 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
python文件和目录操作函数小结
2014/07/11 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python实现的Iou与Giou代码
2020/01/18 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
小学音乐教学反思
2014/02/05 职场文书
大学生自我评价范文
2015/03/03 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
一级电子管军用接收机测评
2022/04/05 无线电