vue.js でデータをリクエストする方法

Vue.js でデータをリクエストする方法: 最初に [vue-resource] モジュールをインストールし、次に [main.js] に [vue-resource] を導入してコンポーネント内で直接使用します。

[関連記事の推奨事項: vue.js]

vue.js リクエスト データメソッド:

#まず、vue-resource リクエスト データ

はじめに: vue-resource リクエスト データ メソッドは公式プラグインです

#使用手順:

1. vue-resource モジュールをインストールします

cnpm install vue-resource --save

--save を追加して package.json 内で参照し、運用環境での使用を示します。なぜなら、日々の開発において、コードを他の人にパッケージ化したり、github にアップロードしたり、コードを公開したい場合、package.json がインストールに必要なパッケージだからです。開発環境でのみ使用する場合は、--save-dev のみが必要です。開発環境でのみ使用されるものと、実稼働環境で使用されるものがあります。

2. main.js

import VueResource from 'vue-resource';
Vue.use(VueResource);

に vue-resource を導入します。

this.$http.get(地址).then(function(){
 
})

をコンポーネント内で直接使用します。 注:

this.$http.get( )

さまざまな http リクエストなどはすべて Promise を継承します。 Promise は非同期リクエストです。第 2 に、.then アロー関数の this はコンテキストを表します。アロー関数 this の定義によると、関数が定義されたときにのみ値が割り当てられていることがわかります。これは関数を定義するオブジェクトを指します。Vue では、オブジェクトはメソッドの現在のページです。つまり、これはデータ内のデータをガイドします。ラッピング関数の外側で関数のデータを取得したい場合、それがクロージャの概念です。実装方法は、外側の関数に var that = this を追加し、最初に外側の this を that に保存します。 例:

Info.vue

<template>
  <div id="info">
    <button @click="getData">获取数据</button>
    <ul>
      <li v-for="(item,index) in list" v-bind:key="index">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
 
<script>
  export default {
    name: "Info",
    data() {
      return {
        list: []
      }
    },
    methods: {
      getData: function () {
        let api = &#39;http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&#39;;
        //此处推荐使用箭头函数。
        this.$http.get(api).then((res)=>{
          this.list = res.body.result;
        }, (err)=>{
          console.log(err);
        });
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

アロー関数が getData() に適用できない場合は、この問題に注意する必要があります。

getData: function () {
  let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
  const _this = this;
  this.$http.get(api).then(function (res) {
    _this.list = res.body.result;
  }, function (err) {
    console.log(err);
  });
}

2 番目、axios リクエスト データ

はじめに: これはサードパーティのプラグインの github アドレスです: https://github.com/axios/axios

axios と fetch-jsonp は両方ともサードパーティのプラグインです

1.

cnpm install axios --save

をインストールし、直接呼び出します。 vue-resource との違いは、aixos がそのページで使用されるたびにそのページで 1 回呼び出されることです。 vue-resource はグローバルにバインドされます。

2. axios の使用場所と導入場所

Axios.get(api).then((response)=>{
  this.list=response.data.result;
}).catch((error)=>{
  console.log(error);
})

axios のクロスドメイン リクエストについて

config->index.js->proxyTable で次のように設定します。ターゲットは自分で入力します 目的のアドレス

# は次のように構成されます。URL はアドレスの後のパラメータです。構成後、npm run dev now を実行するだけです。

複数の同時リクエストについて:

上記は、同じアドレスのクロスドメイン バージョンです。別のアドレスを取得したい クロスドメインの場合、config->index.js->proxyTable の構成を変更し、アドレス ブロックを追加するだけで済みます。

3、fetch-jsonp について

github アドレス: https://github.com/camsong/fetch-jsonp

1. インストール

cnpm install fetch-jsonp --save

2. fetch-jsonp を使用する場所と導入する場所 ##

fetchJsonp('/users.jsonp')
 .then(function(response) {
  return response.json()
 }).then(function(json) {
  console.log('parsed json', json)
 }).catch(function(ex) {
  console.log('parsing failed', ex)
 })

# 関連する無料学習の推奨事項:

JavaScript# ＃＃＃ ＃＃（ビデオ）＃＃＃＃＃＃＃＃＃

以上がvue.js でデータをリクエストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。