詳解如何在Vue項目中發(fā)送jsonp請求

更新時間：2019年10月25日 15:39:52 作者：樂多

這篇文章主要介紹了詳解如何在Vue項目中發(fā)送jsonp請求，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

起因

公司臨時要支撐河南的一個項目，做一個單點登錄的功能。

簡單來說，就是以下3步

客戶方點擊某個按鈕進(jìn)入我們的頁面a

在頁面a中由前端發(fā)送一個jsonp請求到客戶方，得到一個token值

前端得到token值后向自己后端發(fā)送一個請求，后端根據(jù)token去redis(token的值就是redis里的key)里取值(key=token的值，value=用戶信息等)判斷用戶是否已登陸，若登陸則根據(jù)取到的工號等信息后端模擬登陸，若沒有登陸，則跳轉(zhuǎn)到客戶方登陸頁面

怎么做

發(fā)送jsonp請求，axios官方貌似并不支持，所以排除🙅🏻‍♀️

經(jīng)過輾轉(zhuǎn)Google，發(fā)現(xiàn)了*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)
      // 調(diào)用獲取后端token的方法
      this.getToken(data.token)
    }
  },
  methods: {
    getJson() {
     this.$jsonp(this.url, {
      callbackQuery: "callbackParam",
      callbackName: "jsonpCallback"
     })
      .then((json) => {
      // 返回的jsonp數(shù)據(jù)不會放這里，而是在 window.jsonpCallback
       console.log(json)
      })  
    },
    
    getToken(token) {
      this.axios.post('/xxxurl')
        .then((res) => {
          // success 之后就正常登陸了
        })
    
    }
  
  }
 }  
</script>

是不是so easy 🤡但是真的整了一晚上才整出來，誰能知道jsonp的返回值在then里返回不了呢，打印也打印不出來。。。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE使用vue?create命令創(chuàng)建vue2.0項目的全過程
vue-cli是創(chuàng)建Vue項目的一個腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)vue
這篇文章主要為大家介紹了教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-03-03
詳解element-ui表格的合并行和列(非常細(xì)節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
Vue的自定義組件不能使用click方法的解決
這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue3中使用swiper的完整版教程(超詳細(xì)!)
工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下
2023-04-04
Vue el-upload單圖片上傳功能實現(xiàn)
這篇文章主要介紹了Vue el-upload單圖片上傳功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-11-11
vue 清空input標(biāo)簽中file的值操作
這篇文章主要介紹了vue 清空input標(biāo)簽中file的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue3封裝Element導(dǎo)航菜單的實例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-03-03
vue pdf二次封裝解決無法顯示中文問題方法詳解
這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
Vue學(xué)習(xí)筆記之計算屬性與偵聽器用法
這篇文章主要介紹了Vue學(xué)習(xí)筆記之計算屬性與偵聽器用法,結(jié)合實例形式詳細(xì)分析了vue.js計算屬性與偵聽器基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下
2019-12-12