vue ajax

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

// 首先确保你已经安装了 axios，可以通过 npm 或 yarn 安装：
// npm install axios
// 或者
// yarn add axios

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      <p>从服务器获取的数据：</p>
      <pre>{{ data }}</pre>
    </div>
    <div v-if="error">
      <p>请求出错：{{ error }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
      error: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        // 发送 GET 请求到指定的 URL
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
        this.data = response.data;
        this.error = null;
      } catch (err) {
        // 捕获并显示错误信息
        this.error = err.message;
        this.data = null;
      }
    },
  },
};
</script>

<style scoped>
/* 添加一些样式 */
button {
  padding: 10px 20px;
  font-size: 16px;
}
pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个按钮，点击时会触发 fetchData 方法。

2. 脚本部分 (<script>):

   • 导入 axios 库，用于发送 HTTP 请求。
   • 在 data 函数中定义了两个变量 data 和 error，分别用于存储从服务器获取的数据和错误信息。
   • fetchData 方法使用 axios.get 发送 GET 请求，并将响应数据赋值给 data。如果请求失败，则捕获错误并将错误信息赋值给 error。

3. 样式部分 (<style scoped>):

   • 为按钮和预格式化文本 (<pre>) 添加了一些简单的样式。

这个示例展示了如何在 Vue.js 中使用 Axios 发送 AJAX 请求，并处理响应和错误。