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