vue2的axios获取数据，渲染

### 如何在 Vue 2 中使用 Axios 获取数据并进行渲染

在 Vue 2 应用程序中集成 Axios 来发送 HTTP 请求并与服务器交互是一个常见的需求。下面展示了如何配置 Axios 发送 GET 或 POST 请求，并将返回的数据绑定到前端组件上。

#### 配置 Axios 实例

为了简化请求过程以及统一管理请求头和其他全局设置，通常会创建一个自定义的 Axios 实例：

// main.js or a separate file like api.js
import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com', // 设置默认的基础URL
});

export default instance;

#### 创建 Vue 组件

接下来，在 Vue 组件内部导入这个 Axios 实例，并编写逻辑来发起网络请求和处理响应结果。

<template>
  <div class="table-container">
    <!-- Element UI Table Component -->
    <el-table :data="getTabelData" style="width: 100%">
      <el-table-column prop="platform"></el-table-column> <!-- 显示平台列 -->
      <el-table-column label="Staff Name" width="180">
        <template slot-scope="scope">{{ scope.row.staff || '-' }}</template> <!-- 处理可能为空的情况 -->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axiosInstance from './path/to/api'; // 导入之前创建的 Axios 实例

export default {
  name: "DataTable",
  data() {
    return {
      getTabelData: [], // 存储从API接收到的数据
      loading: false,
      error: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        this.loading = true;
        const response = await axiosInstance.post('/endpoint'); // 替换成实际接口地址
        console.log(response.data); // 打印日志以便调试
        
        if (response.status === 200 && Array.isArray(response.data)) {
          this.getTabelData = response.data; // 将获取的数据赋值给变量用于渲染表格
        }
        
      } catch (err) {
        this.error = err.message || 'An unexpected error occurred';
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

上述代码片段说明了怎样在一个名为 `DataTable` 的 Vue 组件里调用后端 API 接口，并把得到的结果展示在一个基于 Element UI 的表格组件之中[^3]。