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 で透明なグラデーション効果を実装するためのサンプルコード

推薦する

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...

ピクセルを包括的なブランド体験に変えるヒント

編集者:この記事では、インタラクティブデザインがブランドコミュニケーションチェーン全体で果たすべき役...

広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...

Unicode の一般的な文字の概要

初期のコンピューターのほとんどは ASCII 文字しか使用できませんでしたが、その後、主要な西洋のア...

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

CentOS7 から CentOS8 にアップグレードする方法 (詳細な手順)

この記事では、具体的な例を使用して、CentOS 7 から CentOS 8 にアップグレードする方...

CSS 経由で JS にパラメータを渡す方法

1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

初心者向けの MySQL のインストール方法 (効果が実証済み)

1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...

Linux テキスト検索コマンド find の詳細な使用方法

find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...

Linux インデックスノード inode の詳細な説明

1. inodeの紹介inode を理解するには、まずファイル ストレージから始める必要があります。...

Webデザインチュートリアル(3):デザインの手順と考え方

<br />前のチュートリアル:Webデザインチュートリアル(2):模倣と盗作について。...

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...