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 をよろしくお願いいたします。