当前位置：首页 > VUE

vue+怎么实现api

2026-02-22 23:07:50VUE

实现 API 调用的基本方法

在 Vue 中实现 API 调用通常需要结合 HTTP 客户端库（如 axios 或 fetch）来完成。以下是常见的实现方式：

安装 axios

npm install axios

封装 API 请求

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

const api = axios.create({
  baseURL: 'https://your-api-endpoint.com',
  timeout: 5000,
});

export const fetchData = (params) => api.get('/data', { params });
export const postData = (payload) => api.post('/data', payload);

在组件中调用 API

选项式 API 写法

vue+怎么实现api

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

export default {
  data() {
    return {
      items: [],
      loading: false,
    };
  },
  methods: {
    async loadItems() {
      this.loading = true;
      try {
        const response = await fetchData({ page: 1 });
        this.items = response.data;
      } catch (error) {
        console.error('API Error:', error);
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() {
    this.loadItems();
  },
};
</script>

组合式 API 写法

<script setup>
import { ref, onMounted } from 'vue';
import { fetchData } from '@/api';

const items = ref([]);
const loading = ref(false);

const loadItems = async () => {
  loading.value = true;
  try {
    const response = await fetchData({ page: 1 });
    items.value = response.data;
  } catch (error) {
    console.error('API Error:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadItems();
});
</script>

使用环境变量管理 API 地址

创建 .env 文件

vue+怎么实现api

VUE_APP_API_BASE_URL=https://your-api-endpoint.com

修改 axios 配置

const api = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
});

处理请求拦截和响应拦截

添加全局拦截器

// 请求拦截
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response.status === 401) {
      // 处理未授权情况
    }
    return Promise.reject(error);
  }
);

使用 Vuex/Pinia 管理 API 状态

Pinia 示例

// stores/apiStore.js
import { defineStore } from 'pinia';
import { fetchData } from '@/api';

export const useApiStore = defineStore('api', {
  state: () => ({
    items: [],
    loading: false,
  }),
  actions: {
    async fetchItems() {
      this.loading = true;
      try {
        const data = await fetchData();
        this.items = data;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
  },
});

这些方法涵盖了 Vue 中实现 API 调用的主要场景，包括基本请求、错误处理、状态管理等。根据项目复杂度可以选择适合的方案组合使用。