如何在 Vue 中处理 API 请求？

在 Vue.js 中处理 API 请求是构建动态、交互式 Web 应用程序的核心部分。为了有效地与后端服务器通信，Vue 生态系统提供了多种方式来发起和管理 API 请求。以下是几种常见的方法和最佳实践：

1. 使用 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，它支持浏览器和 Node.js 环境，并且具有以下优点：

• 支持请求/响应拦截器
• 转换请求数据和响应数据
• 取消请求的能力
• 自动转换 JSON 数据

安装 Axios

首先需要安装 Axios：

npm install axios
# 或者
yarn add axios

创建 Axios 实例

为所有 API 请求创建一个共享的 Axios 实例，以便可以集中配置基础 URL、超时等选项。

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的API地址
  timeout: 5000, // 请求超时时间 (毫秒)
});

export default apiClient;

添加拦截器

可以通过拦截器对每个请求或响应进行预处理，比如添加认证头信息、统一处理错误等。

// 继续在上面的文件中添加
apiClient.interceptors.request.use(
  config => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

apiClient.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的情况
          break;
        case 403:
          console.error('Access denied');
          break;
        // 其他状态码处理...
      }
    } else {
      console.error('Request failed:', error.message);
    }
    return Promise.reject(error);
  }
);

封装 API 请求

将特定的 API 请求封装成服务函数，这样可以使代码更模块化并且易于维护。

// src/api/services.js
import apiClient from './index';

export const fetchItems = async () => {
  const response = await apiClient.get('/data'); // 假设有一个 /data 端点返回数据
  return response.data;
};

export const addItem = async newItem => {
  const response = await apiClient.post('/data', newItem);
  return response.data;
};

2. 在 Vue 组件中使用 API 请求

一旦你有了封装好的 API 请求函数，就可以在 Vue 组件中轻松调用了。通常你会在生命周期钩子（如 created 或 mounted）中执行这些请求，或者通过用户事件触发它们。

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import { fetchItems } from '@/api/services';

export default {
  data() {
    return {
      items: [],
    };
  },
  async created() {
    try {
      this.items = await fetchItems();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
};
</script>

3. Vuex Store

如果你的应用有多个组件依赖于相同的状态，并且这个状态是由 API 请求决定的，那么 Vuex 是一个很好的选择。Vuex 提供了集中式的状态管理，使得全局状态更容易被管理和调试。

// store.js
import { createStore } from 'vuex';
import { fetchItems } from '@/api/services';

export default createStore({
  state: {
    items: [],
  },
  mutations: {
    SET_ITEMS(state, items) {
      state.items = items;
    },
  },
  actions: {
    async fetchItems({ commit }) {
      try {
        const items = await fetchItems();
        commit('SET_ITEMS', items);
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    },
  },
});

然后在组件中你可以像这样使用：

import { useStore } from 'vuex';
import { onMounted } from 'vue';

export default {
  setup() {
    const store = useStore();

    onMounted(() => {
      store.dispatch('fetchItems');
    });

    return {
      items: computed(() => store.state.items),
    };
  },
};

4. 处理加载状态和错误信息

当执行异步操作时，通常还需要考虑显示加载指示器以及如何向用户展示可能发生的错误。可以通过定义额外的状态变量来实现这一点。

const loading = ref(true);
const error = ref(null);

async function loadData() {
  try {
    const response = await apiClient.get('/data');
    items.value = response.data;
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
}

模板中可以根据这些状态变量来决定渲染的内容：

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <ul v-else>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

总结

以上就是在 Vue 中处理 API 请求的一些常见模式和技术栈。根据你的项目需求和技术偏好，可以选择最适合的方法。记住，良好的 API 请求管理不仅提高了用户体验，也帮助你写出更清晰、更易于维护的代码。随着 Vue 生态系统的不断发展，新的工具和技术也会不断涌现，因此保持学习和适应最新的最佳实践是非常重要的。