Vue 如何调用后端提供的接口

在 Vue 项目开发中，与后端进行数据交互是至关重要的环节，而调用后端接口获取数据则是实现这一交互的关键步骤。

我们需要选择一个合适的工具来进行接口调用。在 Vue 生态系统中，Axios 是一个广泛使用的库。它基于 Promise，支持多种请求方式，如 GET、POST、PUT、DELETE 等，并且在浏览器和 Node.js 环境中都能使用。

安装 Axios 非常简单，在项目目录下执行 npm install axios 即可完成安装。

接下来配置 Axios。在 Vue 项目的 src 目录下创建一个 axios.js 文件，在这里我们可以设置一些全局配置，比如基础 URL。示例代码如下：

import axios from 'axios';

const service = axios.create({
  baseURL: 'http://your-backend-url', // 后端接口基础 URL
  timeout: 5000 // 请求超时时间
});

export default service;

然后在需要调用接口的组件中引入配置好的 Axios 实例。假设我们有一个 Home.vue 组件，想要获取后端的用户列表数据：

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from './axios.js';

export default {
  data() {
    return {
      userList: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/users');
        this.userList = response.data;
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    }
  }
};
</script>

在上述代码中，mounted 钩子函数在组件挂载后触发，调用 fetchUsers 方法。fetchUsers 方法通过 axios.get 发送请求到后端的 /users 接口，获取数据后将其赋值给 userList 变量，并在模板中展示。

如果是发送 POST 请求，例如提交用户注册信息，代码如下：

async registerUser(userData) {
  try {
    const response = await axios.post('/register', userData);
    console.log('注册成功', response.data);
  } catch (error) {
    console.error('注册失败', error);
  }
}

通过以上步骤，我们就能在 Vue 项目中轻松地调用后端提供的接口，实现前端与后端的数据交互，为用户提供丰富的功能体验。