Vue发送Get 和 Post 请求以及获取数据

在Vue中，可以使用axios库来发送HTTP请求。以下是如何发送GET和POST请求以及如何处理数据的示例代码：

首先，安装axios：

npm install axios

然后，在Vue组件中使用它：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    fetchData() {
      // GET请求
      axios.get('https://api.example.com/data')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
    postData() {
      // POST请求
      const data = {
        key: 'value'
      };
      axios.post('https://api.example.com/post', data)
        .then(response => {
          // 处理响应数据
          console.log(response.data);
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，我们定义了一个fetchData方法来发送GET请求，并将返回的数据存储在组件的items数组中。我们还定义了一个postData方法来发送POST请求，并处理响应数据。这些方法可以在组件的模板中通过事件绑定（如点击按钮时）触发。