Vue.js 中发起 HTTP 请求：探索各种方法及其使用技巧

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="error">{{ error }}</div>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null,
      error: null,
    };
  },
  methods: {
    fetchData() {
      this.error = null;
      this.data = null;
      axios.get('/api/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          this.error = error.message;
        });
    },
  },
};
</script>

这个例子展示了如何在Vue组件中使用axios库来发起HTTP GET请求，并在请求成功或失败后更新组件的状态。同时，它使用了v-if指令来根据数据是否已加载来显示相应的DOM元素。按钮点击会触发fetchData方法，该方法会清除旧的数据和错误信息，然后发起请求。成功的响应会更新data，而错误会更新error。