vue中jsonp的使用方法
更新時間：2021年11月17日 08:48:56 作者：sunddy_x
這篇文章主要介紹了vue中jsonp的使用方法,文章從安裝開始展開具體的vue中jsonp的使用詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助
1、前言
最近在做手寫輸入法時遇到跨域問題，使用的是qq輸入法的接口，代理無法實現(xiàn)效果，這里使用jsonp來實現(xiàn)。jsonp原理可以自行百度，這里記錄一下vue-jsonp的使用和踩的一點小坑，官方文檔請前往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 ，導入時注意使用 { } 解構(gòu)賦值，網(wǎng)上有部分教程為老版本，有需要可以前往前言中的npm官方地址，有具體使用教程。
4、vue文件使用
this.$jsonp('/some-jsonp-url', {
myCustomUrlParam: 'veryNice'
}).then(res => {
// 此處代碼不執(zhí)行
// 因為會直接調(diào)用返回的那個回調(diào)函數(shù)
})
假設返回的函數(shù)名稱為callbackFun，需要 在window對象上綁定 callbackFun函數(shù)
mounted() {
// 將callbackFun方法綁定到window對象
window['callbackFun'] = (data) => {
cosole.log('定義的回調(diào)函數(shù)')
}
// 假設返回的為callbackFun.ajax_callback()
window['callbackFun'] = {
ajax_callback: function (res) {
cosole.log('定義的回調(diào)函數(shù)')
}
}
}
注意：jsonp請求方式僅為 get
到此這篇關(guān)于vue中jsonp的使用方法的文章就介紹到這了,更多相關(guān)vue中jsonp的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue?Router在Vue.js的核心庫上提供了路由的功能,使得我們可以在單頁應用中實現(xiàn)頁面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue使用watch監(jiān)聽器的基本使用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
SpringBoot+Vue3實現(xiàn)文件的上傳和下載功能
上傳文件和下載文件是我們平時經(jīng)常用到的功能，接下來就讓我們用SpringBoot，Vue3和ElementPlus組件實現(xiàn)文件的上傳和下載功能吧，感興趣的朋友跟隨小編一起看看吧2023-01-01
本文主要介紹了Vue不定高展開動效原理詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實現(xiàn)，文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下2022-05-05
vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-08-08
在vue2的響應式中,存在著添加屬性、刪除屬性、以及通過下標修改數(shù)組,但頁面不會自動更新的問題,而這些問題在vue3中都得以解決,本文就給大家詳細的介紹一下Vue響應式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
這篇文章主要介紹了vue動態(tài)添加store、路由和國際化配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05