当前位置：首页 > VUE

vue实现接口连接

2026-02-11 00:23:16VUE

Vue 实现接口连接的方法

Vue 中连接接口通常使用 axios 或 fetch 进行 HTTP 请求。以下是具体实现方式。

安装 axios

在项目中安装 axios：

npm install axios

创建 API 服务文件

建议将接口请求封装在单独的 api.js 文件中：

vue实现接口连接

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // 替换为实际 API 地址
  timeout: 5000,
});

export default {
  getPosts() {
    return api.get('/posts');
  },
  createPost(postData) {
    return api.post('/posts', postData);
  },
};

在组件中使用接口

在 Vue 组件中调用封装好的接口方法：

import api from './api';

export default {
  data() {
    return {
      posts: [],
    };
  },
  async created() {
    try {
      const response = await api.getPosts();
      this.posts = response.data;
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  },
};

处理跨域问题

开发时若遇到跨域问题，可在 vue.config.js 中配置代理：

vue实现接口连接

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

添加请求拦截器

可在 axios 实例中添加全局拦截器处理请求和响应：

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

错误处理

建议统一处理 API 错误：

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