vueでaxiosを使用してデータを呼び出す

Vue で API を呼び出す方法はありますか？最初に axios を使用することをお勧めします。便利で使いやすく、さまざまな API をサポートし、簡単にラップすることもできます。

まず、node を使用して axios をインストールします。

npm install axios

次に、main.js ファイルで axios をインポートします。

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

私のプロジェクトディレクトリを例にして、コードを見てみましょう。

// ListThere.vue

// HTMLコード
...
<div>{{ info }}</div>
...

// JavaScriptコード
import axios from "axios";

export default {
  name: "ListThere",
  data() {
    return {
      ...
    };
  },
  components: {
    ...
  },
  methods: {
    ...
  },
  mounted() {
    axios
      .get("http://api.h-camel.com/api?mod=interview&ctr=issues&act=today")
      .then((response) => (this.info = response))
  },
};

データが正常に取得されたら、ページに表示する必要があります。Vue の組み込みのv-forを使用してリストをレンダリングします。

<ul class="list-api-show">
  <li v-for="(item, index) in show" :key="index">
    {{ item.title }}
  </li>
</ul>

次に、axios を使用してデータをv-forに指定します。

mounted() {
  axios
    // ...
    .then((response) => (this.show = response.data.result.today))
}

データが正常に取得され、v-for内で表示されます。

もちろん、これは成功した場合の話ですが、失敗した場合はどうでしょうか？ブラウザにエラーメッセージを表示する必要があるため、axios はerrという API を提供しています。

mounted() {
  axios
    // ...
    .catch(function (error) {
      if (error.response) {
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
        console.log('err')
      } else if (error.request) {
        console.log(error.request);
        console.log('err')
      } else {
        console.log('Error', error.message);
        console.log('err')
      }
      console.log(error.config);
      console.log('err')
    });
}

API に問題がある場合や、コードの記述ミスがある場合は、エラーメッセージが表示されます。具体的なエラーにはどのような警告が表示されるかは、個々に確認する必要があります。