当前位置：首页 > VUE

vue实现api

2026-02-10 10:34:39VUE

Vue 中实现 API 调用的方法

使用 Axios 发送请求

Axios 是 Vue 中常用的 HTTP 客户端库，支持 Promise API。安装 Axios 后，可以在组件或 Vuex 中直接调用。

安装 Axios：

npm install axios

在组件中使用：

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
}

封装 API 模块

将 API 请求封装为独立的模块，便于维护和复用。创建一个 api.js 文件：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' }
});

export default {
  getData() {
    return apiClient.get('/data');
  },
  postData(payload) {
    return apiClient.post('/data', payload);
  }
}

在组件中调用封装好的 API：

vue实现api

import api from '@/api';

export default {
  methods: {
    async loadData() {
      try {
        const response = await api.getData();
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
}

使用 Vuex 管理 API 状态

对于复杂应用，可以通过 Vuex 集中管理 API 返回的数据和状态。

Vuex 示例：

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

export default new Vuex.Store({
  state: {
    data: []
  },
  mutations: {
    SET_DATA(state, payload) {
      state.data = payload;
    }
  },
  actions: {
    async fetchData({ commit }) {
      try {
        const response = await axios.get('https://api.example.com/data');
        commit('SET_DATA', response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
});

组件中调用 Vuex action：

vue实现api

export default {
  computed: {
    data() {
      return this.$store.state.data;
    }
  },
  created() {
    this.$store.dispatch('fetchData');
  }
}

处理跨域问题

在开发环境中，可以通过配置 vue.config.js 代理解决跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

调用时直接使用相对路径：

axios.get('/api/data');

使用 Fetch API 替代方案

如果不依赖 Axios，可以使用浏览器原生 Fetch API：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

拦截器配置

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);
  }
);