vue-jsonp的使用及說明
更新時(shí)間：2022年12月06日 09:19:53 作者：sunddy_x
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue-jsonp的使用
最近在做手寫輸入法時(shí)遇到跨域問題，使用的是qq輸入法的接口，代理無法實(shí)現(xiàn)效果，這里使用jsonp來實(shí)現(xiàn)。
jsonp原理可以自行百度，這里記錄一下vue-jsonp的使用和踩的一點(diǎn)小坑，官方文檔請前往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對象上綁定 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
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是前端輕量級MVVM框架,入門門檻相對較低,今天用Vue做一個(gè)購物車實(shí)例,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)購物車全部功能的簡單方法,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue2和vue3實(shí)現(xiàn)圖片懶加載方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個(gè)組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下2024-01-01
這篇文章主要為大家分享了一個(gè)非常實(shí)用的vue導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)聽數(shù)據(jù)對象變化的源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應(yīng)用，它是?HTML5?版本的?saveAs()?FileSaver?實(shí)現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導(dǎo)出文件,需要的朋友可以參考下2023-09-09
Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別
本文詳細(xì)的介紹了Vuerouter的beforeEach與afterEach鉤子函數(shù)的區(qū)別和使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了解決vue $http的get和post請求跨域問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細(xì)的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下2023-06-06