vue 请求

// 使用 Vue.js 发起 HTTP 请求的示例代码

// 引入 axios 库，用于发起 HTTP 请求
import axios from 'axios';

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    // 存储请求返回的数据
    response: null,
    error: null
  },
  methods: {
    // 定义一个方法来发起 GET 请求
    fetchData() {
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
          // 请求成功后将响应数据存储在 data 中
          this.response = response.data;
        })
        .catch(error => {
          // 请求失败后将错误信息存储在 data 中
          this.error = error;
        });
    }
  },
  mounted() {
    // 当组件挂载完成后自动调用 fetchData 方法
    this.fetchData();
  }
});

解释说明：

1. 引入 Axios：我们使用 axios 库来发起 HTTP 请求。Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境。

2. Vue 实例：创建了一个 Vue 实例，并绑定了一个 HTML 元素（#app）。在这个实例中，我们定义了两个数据属性：response 和 error，分别用于存储请求返回的数据和可能的错误信息。

3. fetchData 方法：这是一个自定义的方法，用来发起一个 GET 请求到指定的 API（这里使用的是 jsonplaceholder 这个模拟 API）。如果请求成功，则将返回的数据存储在 response 中；如果请求失败，则将错误信息存储在 error 中。

4. mounted 钩子：当 Vue 组件挂载完成后，会自动调用 fetchData 方法来发起请求。

这样，当页面加载时，Vue 会自动发起一个 HTTP 请求，并将结果展示在页面上。