当前位置：首页 > VUE

vue中实现接口

2026-01-15 23:35:36VUE

Vue 中实现接口调用的方法

在 Vue 中实现接口调用通常使用 axios 或 fetch 等 HTTP 客户端库。以下是常见的实现方式：

安装 axios

通过 npm 或 yarn 安装 axios：

npm install axios
# 或
yarn add axios

封装 axios 实例

在 src 目录下创建 api 文件夹，并新建 request.js 文件：

import axios from 'axios';

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

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 添加 token 等逻辑
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

export default instance;

定义接口模块

在 api 文件夹下创建 user.js 文件：

import request from './request';

export const getUserInfo = (userId) => {
  return request({
    url: `/user/${userId}`,
    method: 'get',
  });
};

export const updateUserInfo = (data) => {
  return request({
    url: '/user/update',
    method: 'post',
    data,
  });
};

在组件中调用接口

在 Vue 组件中导入并调用接口：

import { getUserInfo, updateUserInfo } from '@/api/user';

export default {
  data() {
    return {
      user: null,
    };
  },
  async created() {
    try {
      const res = await getUserInfo(123);
      this.user = res;
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    async handleUpdate() {
      try {
        await updateUserInfo({ name: 'New Name' });
        alert('更新成功');
      } catch (error) {
        console.error(error);
      }
    },
  },
};

使用 async/await 或 Promise

根据项目需求选择异步处理方式：

// async/await 方式
async fetchData() {
  try {
    const res = await getUserInfo(123);
    console.log(res);
  } catch (error) {
    console.error(error);
  }
}

// Promise 方式
getUserInfo(123)
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.error(error);
  });

环境变量配置

在项目根目录下创建 .env 文件：

VUE_APP_API_BASE_URL=https://api.example.com

修改 request.js 中的 baseURL：

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

使用 fetch 实现接口调用

如果不想使用 axios，可以使用原生 fetch：

vue中实现接口

export const fetchUserInfo = (userId) => {
  return fetch(`https://api.example.com/user/${userId}`)
    .then(response => response.json())
    .catch(error => console.error(error));
};