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

Vue で API を呼び出すにはどうすればよいでしょうか？最初に選ぶべきは Axios です。便利で使いやすく、さまざまな API をサポートし、ラッピングも簡単です。

まずは Node でインストールします。

npm install axios

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

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

Vue.use(VueAxios, axios)

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

// ListThere.vue

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

// js コード
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 は API を提供しています --- err構文。

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 に問題があったり、呼び出し時にコードに誤りがあった場合、エラーメッセージが表示されます。具体的にどのようなエラーがどのような警告を引き起こすかは、私たちが一つ一つ経験して探求する必要があります。