vue request

// 使用 Vue 和 Axios 进行 HTTP 请求的示例

// 首先，确保你已经安装了 axios
// npm install axios

// 在你的 Vue 组件中引入 axios
import axios from 'axios';

export default {
  data() {
    return {
      response: null,
      error: null
    };
  },
  methods: {
    // 发送 GET 请求
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          // 请求成功时处理响应数据
          this.response = response.data;
        })
        .catch(error => {
          // 请求失败时处理错误
          this.error = error;
        });
    },

    // 发送 POST 请求
    postData() {
      const payload = {
        title: 'foo',
        body: 'bar',
        userId: 1
      };

      axios.post('https://api.example.com/posts', payload)
        .then(response => {
          // 请求成功时处理响应数据
          this.response = response.data;
        })
        .catch(error => {
          // 请求失败时处理错误
          this.error = error;
        });
    }
  },
  created() {
    // 组件创建完成后可以调用 fetchData 方法来获取数据
    this.fetchData();
  }
};

解释说明：

1. 引入 Axios：首先需要在项目中安装并引入 axios，它是一个流行的 HTTP 客户端库，用于发送 AJAX 请求。
2. GET 请求：fetchData 方法展示了如何使用 axios.get 发送 GET 请求，并在请求成功或失败时分别处理响应数据或错误。
3. POST 请求：postData 方法展示了如何使用 axios.post 发送 POST 请求，并传递一个 JSON 对象作为请求体。
4. 生命周期钩子：在组件创建完成后 (created 生命周期钩子)，自动调用 fetchData 方法来获取数据。