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 ，導(dǎo)入時注意使用 { } 解構(gòu)賦值，網(wǎng)上有部分教程為老版本，有需要可以前往前言中的npm官方地址，有具體使用教程。

4、vue文件使用

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

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

mounted() {
  // 將callbackFun方法綁定到window對象
  window['callbackFun'] = (data) => {
    cosole.log('定義的回調(diào)函數(shù)')
  }
  // 假設(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之組件的生命周期流程
每個Vue實例在創(chuàng)建時都要經(jīng)過一系列初始化,?例如設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM并在數(shù)據(jù)變化時更新DOM等，同時,?也會運行一些叫作生命周期鉤子的函數(shù)，接下來讓我們一起來探索Vue實例被創(chuàng)建時都經(jīng)歷了什么，感興趣的同學跟著小編一起來探討吧
2023-05-05
vue項目實現(xiàn)對某個區(qū)域繪制水印
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)對某個區(qū)域繪制水印，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
使用vue實現(xiàn)加載頁
這篇文章主要為大家詳細介紹了使用vue實現(xiàn)加載頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
使用VitePress搭建及部署vue組件庫文檔的示例詳解
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個文檔，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-08-08
Vue.js仿Select下拉框效果
這篇文章主要為大家詳細介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
vue3+elementPlus項目支持設(shè)置默認附件方式
這篇文章主要介紹了vue3+elementPlus項目支持設(shè)置默認附件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue.js實戰(zhàn)之利用vue-router實現(xiàn)跳轉(zhuǎn)頁面
對于單頁應(yīng)用，官方提供了vue-router進行路由跳轉(zhuǎn)的處理，這篇文章主要給大家介紹了Vue.js實戰(zhàn)之利用vue-router實現(xiàn)跳轉(zhuǎn)頁面的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-04-04
vue項目中使用fetch的實現(xiàn)方法
這篇文章主要介紹了vue項目中使用fetch的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
如何在Vue中實現(xiàn)Svelte的Defer Transition
這篇文章主要介紹了如何在Vue中實現(xiàn)Svelte的Defer Transition，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下
2021-04-04
Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標簽可以用來遍歷數(shù)組，將數(shù)組的每一個值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06