VueでAPIを読み取る方法

Vue.js を使用すると、これらのサービスの 1 つを中心にアプリケーションを徐々に構築し、数分でユーザーへのコンテンツの提供を開始できます。

#サードパーティ API を使用してサービスを提供するにはどうすればよいですか?

ajax リクエストを作成して応答を処理し、axios を使用して API データを処理できます。

Axios は、Ajax リクエストを作成するための Promise ベースの HTTP クライアントであり、私たちのアプリケーションに最適です。シンプルで豊富な API を提供します。これは fetchAPI に非常に似ていますが、古いブラウザ用に追加のポリフィルを必要とせず、いくつかの賢い機能を備えています。

以前は、vue-resource は通常 Vue プロジェクトで使用されていましたが、現在は廃止されています。

Import axios:

<!-- ./index.html -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Vue アプリケーションがページにマウントされたら、ホット イベントのリストを取得するホーム セクション リクエストを作成できます:

// ./app.js
const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
    .then(response => {this.results = response.data.results})
  }
});

覚えておいてください: your_api_key を、以前に取得した実際の API キーに置き換えます。

以上がVueでAPIを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。