当前位置：首页 > VUE

vue实现接口连接

2026-03-28 10:23:35VUE

Vue 实现接口连接的常见方法

在 Vue 中连接后端接口通常使用 Axios 或 Fetch API，以下是具体实现方式：

安装 Axios

通过 npm 或 yarn 安装 Axios 库：

npm install axios

创建 API 服务文件

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

vue实现接口连接

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://your-api-endpoint.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})

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

在组件中使用 API

在 Vue 组件中导入并使用定义好的 API 方法：

import api from '@/api/api'

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    try {
      const response = await api.getData()
      this.items = response.data
    } catch (error) {
      console.error(error)
    }
  },
  methods: {
    async submitData() {
      try {
        await api.postData({ key: 'value' })
      } catch (error) {
        console.error(error)
      }
    }
  }
}

添加请求拦截器

可以在 api.js 中添加全局请求/响应拦截器：

vue实现接口连接

// 请求拦截器
api.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)

// 响应拦截器
api.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理未授权情况
    }
    return Promise.reject(error)
  }
)

环境变量配置

在项目根目录创建 .env 文件管理不同环境的 API 地址：

VUE_APP_API_URL=https://your-api-endpoint.com

然后在 api.js 中使用：

baseURL: process.env.VUE_APP_API_URL

使用 Fetch API 的替代方案

如果不使用 Axios，可以使用原生 Fetch API：

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

以上方法涵盖了 Vue 项目中连接接口的主要实现方式，可根据项目需求选择适合的方案。