当前位置：首页 > VUE

vue实现接口

2026-01-12 23:34:00VUE

Vue 实现接口请求的方法

在 Vue 中实现接口请求通常使用 axios 或 fetch，以下是具体实现方式：

安装 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 等请求头
    config.headers['Authorization'] = 'Bearer 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)
      } catch (error) {
        console.error('登录失败', error)
      }
    }
  },
  async created() {
    const userInfo = await getUserInfo()
    console.log('用户信息', userInfo)
  }
}

环境变量配置

在项目根目录创建 .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

使用 fetch 的替代方案

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

async function fetchData(url, options = {}) {
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json',
      ...options.headers
    },
    ...options
  })
  return response.json()
}