vue-jsonp的使用及說(shuō)明
更新時(shí)間：2022年12月06日 09:19:53 作者：sunddy_x
這篇文章主要介紹了vue-jsonp的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue-jsonp的使用
最近在做手寫(xiě)輸入法時(shí)遇到跨域問(wèn)題，使用的是qq輸入法的接口，代理無(wú)法實(shí)現(xiàn)效果，這里使用jsonp來(lái)實(shí)現(xiàn)。
jsonp原理可以自行百度，這里記錄一下vue-jsonp的使用和踩的一點(diǎn)小坑，官方文檔請(qǐng)前往npm地址。
安裝
npm install vue-jsonp -S
或者
yarn add vue-jsonp
使用
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官方地址，有具體使用教程。
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
vue+jsonp跨域
npm install vue-jsonp --save
main.js中添加
import { VueJsonp } from 'vue-jsonp'?使用
? this.$jsonp('http://127.0.0.1:8085/api/api/' , {
? ? ?}).then((res)=>{
? ? ? ?console.log(res)
? ? ?})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之文件加載執(zhí)行全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
第一次使用webstrom簡(jiǎn)單創(chuàng)建vue項(xiàng)目的一些報(bào)錯(cuò)實(shí)戰(zhàn)記錄
在使用webstorm新建vue項(xiàng)目時(shí)常會(huì)遇到一些報(bào)錯(cuò),特別是新手第一次運(yùn)行項(xiàng)目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡(jiǎn)單創(chuàng)建vue項(xiàng)目的一些報(bào)錯(cuò)實(shí)戰(zhàn)記錄,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)加載頁(yè)面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實(shí)現(xiàn)加載頁(yè)面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue獲取input輸入值的問(wèn)題解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家掌握這樣的問(wèn)題，需要的朋友可以參考下2017-10-10
vue深入解析之render function code詳解
vue對(duì)大家來(lái)說(shuō)應(yīng)該再熟悉不過(guò)了，下面這篇文章主要給大家深入的解析了vue之render function code的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
詳解vue computed的緩存實(shí)現(xiàn)原理
這篇文章主要介紹了vue computed的緩存實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
淺談Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題
這篇文章主要介紹了Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
近期在用vue做一個(gè)環(huán)保類的項(xiàng)目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue組件之單向數(shù)據(jù)流的解決方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11