当前位置：首页 > VUE

Vue调接口怎么实现

2026-02-23 10:10:29VUE

Vue 调用接口的实现方法

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

安装 axios

通过 npm 或 yarn 安装 axios：

npm install axios
# 或
yarn add axios

基本调用示例

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

import axios from 'axios';

export default {
  data() {
    return {
      responseData: null,
      error: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        this.responseData = response.data;
      } catch (err) {
        this.error = err.message;
      }
    }
  },
  mounted() {
    this.fetchData();
  }
};

封装 axios 实例

为统一配置请求基地址和拦截器，可以封装 axios：

// src/utils/request.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => Promise.reject(error)
);

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

export default instance;

在组件中使用封装后的实例

import request from '@/utils/request';

export default {
  methods: {
    async getData() {
      try {
        const data = await request.get('/data');
        console.log(data);
      } catch (err) {
        console.error(err);
      }
    }
  }
};

使用环境变量配置接口地址

在项目根目录创建 .env 文件：

VUE_APP_API_BASE_URL=https://api.example.com

代码中通过 process.env.VUE_APP_API_BASE_URL 获取。

处理跨域问题

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

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

使用 async/await 或 Promise

两种异步处理方式的对比：

// async/await
async fetchData() {
  try {
    const res = await axios.get('/data');
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
}

// Promise
fetchData() {
  axios.get('/data')
    .then(res => console.log(res.data))
    .catch(err => console.error(err));
}

Vue调接口怎么实现