当前位置：首页 > VUE

Vue调接口怎么实现

2026-01-22 19:23:29VUE

Vue调用接口的实现方法

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

安装axios

通过npm或yarn安装axios依赖：

npm install axios
# 或
yarn add axios

基本请求封装

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

Vue调接口怎么实现

import axios from 'axios'

const service = axios.create({
  baseURL: 'https://your-api-domain.com', // 接口基础路径
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在此处添加token等全局headers
    config.headers['Authorization'] = 'Bearer your_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 login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

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

组件中调用接口

在Vue组件中使用封装好的接口：

Vue调接口怎么实现

import { login, getUserInfo } from '@/api/user'

export default {
  methods: {
    async handleLogin() {
      try {
        const res = await login({ username: 'admin', password: '123456' })
        console.log('登录成功', res)

        const userInfo = await getUserInfo()
        console.log('用户信息', userInfo)
      } catch (error) {
        console.error('请求失败', error)
      }
    }
  }
}

环境变量配置

在项目根目录创建.env.development和.env.production文件管理不同环境接口地址：

# .env.development
VUE_APP_BASE_API = '/dev-api'

# .env.production
VUE_APP_BASE_API = '/prod-api'

修改request.js中的baseURL：

baseURL: process.env.VUE_APP_BASE_API

跨域处理

开发环境可通过vue.config.js配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-domain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}