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 ，導入時注意使用 { } 解構賦值，網上有部分教程為老版本，有需要可以前往前言中的npm官方地址，有具體使用教程。
vue文件使用
this.$jsonp('/some-jsonp-url', {
myCustomUrlParam: 'veryNice'
}).then(res => {
// 此處代碼不執(zhí)行
// 因為會直接調用返回的那個回調函數
})
假設返回的函數名稱為callbackFun，需要 在window對象上綁定 callbackFun函數
mounted() {
// 將callbackFun方法綁定到window對象
window['callbackFun'] = (data) => {
cosole.log('定義的回調函數')
}
// 假設返回的為callbackFun.ajax_callback()
window['callbackFun'] = {
ajax_callback: function (res) {
cosole.log('定義的回調函數')
}
}
}
注意：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)
? ? ?})以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue之文件加載執(zhí)行全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄
在使用webstorm新建vue項目時常會遇到一些報錯,特別是新手第一次運行項目,這篇文章主要給大家介紹了關于第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實現(xiàn)加載頁面自動觸發(fā)函數(及異步獲取數據)
這篇文章主要介紹了vue實現(xiàn)加載頁面自動觸發(fā)函數(及異步獲取數據)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue獲取input輸入值的問題解決辦法的相關資料,希望通過本文能幫助到大家，讓大家掌握這樣的問題，需要的朋友可以參考下2017-10-10
vue深入解析之render function code詳解
vue對大家來說應該再熟悉不過了，下面這篇文章主要給大家深入的解析了vue之render function code的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了vue computed的緩存實現(xiàn)原理，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
淺談Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題
這篇文章主要介紹了Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
近期在用vue做一個環(huán)保類的項目,要求使用高德地圖,下面這篇文章主要給大家介紹了關于Vue接入高德地圖的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue組件之單向數據流的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11