快捷導(dǎo)航

vue中jsonp的使用方法

更新時(shí)間：2021年11月17日 08:48:56 作者：sunddy_x

這篇文章主要介紹了vue中jsonp的使用方法,文章從安裝開始展開具體的vue中jsonp的使用詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助

1、前言

最近在做手寫輸入法時(shí)遇到跨域問(wèn)題，使用的是qq輸入法的接口，代理無(wú)法實(shí)現(xiàn)效果，這里使用jsonp來(lái)實(shí)現(xiàn)。jsonp原理可以自行百度，這里記錄一下vue-jsonp的使用和踩的一點(diǎn)小坑，官方文檔請(qǐng)前往npm地址。

2、安裝

npm install vue-jsonp -S

或者

yarn add vue-jsonp

3、使用

mian.js引用

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

注意：此處包版本為 2.0.0 ，導(dǎo)入時(shí)注意使用 { } 解構(gòu)賦值，網(wǎng)上有部分教程為老版本，有需要可以前往前言中的npm官方地址，有具體使用教程。

4、vue文件使用

this.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
}).then(res => {
  // 此處代碼不執(zhí)行
  // 因?yàn)闀?huì)直接調(diào)用返回的那個(gè)回調(diào)函數(shù)
})

假設(shè)返回的函數(shù)名稱為callbackFun，需要在window對(duì)象上綁定 callbackFun函數(shù)

mounted() {
  // 將callbackFun方法綁定到window對(duì)象
  window['callbackFun'] = (data) => {
    cosole.log('定義的回調(diào)函數(shù)')
  }
  // 假設(shè)返回的為callbackFun.ajax_callback()
  window['callbackFun'] = {
    ajax_callback: function (res) {
      cosole.log('定義的回調(diào)函數(shù)')
    }
  }
}

注意：jsonp請(qǐng)求方式僅為 get

到此這篇關(guān)于vue中jsonp的使用方法的文章就介紹到這了,更多相關(guān)vue中jsonp的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)列表倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue3中嵌套路由和編程式路由的實(shí)現(xiàn)
Vue?Router在Vue.js的核心庫(kù)上提供了路由的功能,使得我們可以在單頁(yè)應(yīng)用中實(shí)現(xiàn)頁(yè)面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
VUE watch監(jiān)聽器的基本使用方法詳解
這篇文章主要介紹了vue使用watch監(jiān)聽器的基本使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-10-10
SpringBoot+Vue3實(shí)現(xiàn)文件的上傳和下載功能
上傳文件和下載文件是我們平時(shí)經(jīng)常用到的功能，接下來(lái)就讓我們用SpringBoot，Vue3和ElementPlus組件實(shí)現(xiàn)文件的上傳和下載功能吧，感興趣的朋友跟隨小編一起看看吧
2023-01-01
Vue 不定高展開動(dòng)效原理詳解
本文主要介紹了Vue不定高展開動(dòng)效原理詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)，文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下
2022-05-05
vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-08-08
一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過(guò)下標(biāo)修改數(shù)組,但頁(yè)面不會(huì)自動(dòng)更新的問(wèn)題,而這些問(wèn)題在vue3中都得以解決,本文就給大家詳細(xì)的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來(lái)看看吧
2023-08-08
vue動(dòng)態(tài)添加store、路由和國(guó)際化配置方式
這篇文章主要介紹了vue動(dòng)態(tài)添加store、路由和國(guó)際化配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05