当前位置：首页 > VUE

vue 实现接口调用

2026-03-29 19:25:57VUE

安装 axios 依赖

在 Vue 项目中安装 axios，用于发送 HTTP 请求：

npm install axios

创建 API 封装模块

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

import axios from 'axios';

const service = axios.create({
  baseURL: 'https://api.example.com', // 接口基础地址
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在此处添加请求头（如 token）
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

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

export default service;

定义具体接口

在 api 文件夹下创建模块化接口文件（如 user.js）：

import request from './request';

export function getUserInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params,
  });
}

export function updateUser(data) {
  return request({
    url: '/user/update',
    method: 'post',
    data,
  });
}

在组件中调用接口

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

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

export default {
  methods: {
    async fetchData() {
      try {
        const res = await getUserInfo({ id: 1 });
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    },
    async submitData() {
      try {
        await updateUser({ name: 'Vue', age: 18 });
      } catch (error) {
        console.error(error);
      }
    },
  },
  mounted() {
    this.fetchData();
  },
};

环境变量配置

在项目根目录创建 .env.development 和 .env.production 文件，区分开发和生产环境接口地址：

# .env.development
VUE_APP_BASE_API = 'https://dev-api.example.com'

# .env.production
VUE_APP_BASE_API = 'https://api.example.com'

修改 request.js 中的 baseURL：

baseURL: process.env.VUE_APP_BASE_API,

跨域处理（开发环境）

在 vue.config.js 中配置代理：

vue 实现接口调用

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};