当前位置：首页 > VUE

vue实现api

2026-01-07 23:40:58VUE

Vue 实现 API 调用

在 Vue 中调用 API 通常涉及使用 axios 或 fetch 发送 HTTP 请求，并结合 Vue 的响应式特性管理数据。以下是常见的实现方式：

安装 axios

通过 npm 或 yarn 安装 axios：

npm install axios

基本 API 调用示例

在 Vue 组件中引入 axios 并发送请求：

vue实现api

import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      error: null
    };
  },
  methods: {
    async fetchPosts() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        this.posts = response.data;
      } catch (err) {
        this.error = err.message;
      }
    }
  },
  mounted() {
    this.fetchPosts();
  }
};

封装 API 模块

将 API 请求封装为独立模块（如 api.js），便于复用：

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

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

export const getPosts = () => api.get('/posts');
export const createPost = (postData) => api.post('/posts', postData);

在组件中使用：

vue实现api

import { getPosts } from '@/api';

export default {
  methods: {
    async loadData() {
      const response = await getPosts();
      console.log(response.data);
    }
  }
};

使用 Vuex 管理 API 数据

对于复杂应用，可通过 Vuex 集中管理 API 返回的数据：

// store.js
import axios from 'axios';

export default {
  state: {
    users: []
  },
  mutations: {
    SET_USERS(state, users) {
      state.users = users;
    }
  },
  actions: {
    async fetchUsers({ commit }) {
      const response = await axios.get('/users');
      commit('SET_USERS', response.data);
    }
  }
};

处理加载状态

通过变量控制加载状态，提升用户体验：

data() {
  return {
    isLoading: false
  };
},
methods: {
  async fetchData() {
    this.isLoading = true;
    try {
      await apiCall();
    } finally {
      this.isLoading = false;
    }
  }
}

拦截器配置

使用 axios 拦截器统一处理请求和响应：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);