Vueでjsonpを使用する方法

Vueでjsonpを使用する方法

1. はじめに

最近、手書き入力メソッドの作業中にクロスドメインの問題が発生しました。QQ入力メソッドのインターフェースを使用しましたが、プロキシでは効果が得られませんでした。ここではjsonpを使用して実装しました。 jsonp の原理については、Baidu で自分で検索できます。ここではvue-jsonpの使用法といくつかの小さな落とし穴を記録します。公式ドキュメントについては、npm アドレスにアクセスしてください。

2. インストール

vue-jsonp をインストール -S

または

糸を追加するvue-jsonp

3. 使用

mian.js リファレンス

// メイン.js
'vue' から Vue をインポートします
'vue-jsonp' から { VueJsonp } をインポートします
Vue.use(VueJsonp) // $jsonp は vue プロトタイプにマウントされ、vm.$jsonp() で直接使用できます。

注:ここでのパッケージバージョンは 2.0.0 です。インポートするときは、{} 分解代入の使用に注意してください。インターネット上のチュートリアルの中には古いバージョンもあります。必要に応じて、序文の公式 npm アドレスにアクセスして、具体的な使用方法のチュートリアルを参照してください。

4. vueファイルの使用

this.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'とても素敵'
}).then(res => {
  // 返されたコールバック関数が直接呼び出されるため、ここのコードは実行されません})

返される関数の名前が callbackFun であると仮定すると、callbackFun 関数をウィンドウ オブジェクトにバインドする必要があります。

マウント() {
  // callbackFun メソッドをウィンドウオブジェクトにバインドします。window['callbackFun'] = (data) => {
    cosole.log('定義されたコールバック関数')
  }
  // callbackFun.ajax_callback() が返されると仮定します
  ウィンドウ['callbackFun'] = {
    ajax_callback: 関数 (res) {
      cosole.log('定義されたコールバック関数')
    }
  }
}

注: jsonpリクエストメソッドは取得のみです

vue での jsonp の使い方に関するこの記事はこれで終わりです。vue での jsonp の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueでJson形式のデータを表示する方法
  • Vue でローカル JSON データを読み込む方法
  • Vue-cli の POST リクエストで Json 形式のデータを送信する方法
  • シミュレートされた JSON データを使用して Vue で効果を表示する方法
  • JSONを使用してVueを共有する最も簡単な方法2つ
  • Vueで背景のJSON文字列を取得する方法

<<:  ウェブページをデザインするには?ウェブページを作成するには?

>>:  CSS で透明なグラデーション効果を実装するためのサンプルコード

推薦する

Docker コマンドラインの完全ガイド (知っておくべき 18 のこと)

序文Docker イメージは Dockerfile といくつかの必要な依存関係で構成され、Docke...

Pythonで書かれたWebアプリケーションをDockerでデプロイする実践

目次1. Dockerをインストールする2. コードを書く3. Dockerfileを書く4. 画像...

Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...

WeChatミニプログラム公式顔認証の詳しい説明

ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...

Vueは、センシティブな単語フィルタリングコンポーネントを検出するためのさまざまなアイデアを実装しています。

目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...

仕事の効率を上げるJS略語スキル20選

目次複数の変数を同時に宣言する場合は、1 行に短縮できます。分割代入は複数の変数に同時に値を割り当て...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....

MySQL 5.7 の sql_mode のデフォルト値によって生じる落とし穴と解決策

通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...

Dockerはコンテナポートバインディングのローカルポートを実装します

今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

HTML の小さなタグの使用に関するヒント

<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...

Web2.0: 情報過多の原因と解決策

<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...

CentOS 8が利用可能になりました

CentOS 8 が利用可能になりました! CentOS 8 と RedHat Enterprise...