vue 怎么实现api

在 Vue 中实现 API 调用

使用 axios 发起 HTTP 请求

安装 axios 并引入到项目中：

npm install axios

在组件或单独的文件中导入 axios：

import axios from 'axios';

发起 GET 请求示例：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发起 POST 请求示例：

axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

封装 API 模块

创建一个专门的 API 模块（如 api.js）集中管理请求：

import axios from 'axios';

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

export const fetchData = () => api.get('/data');
export const postData = (payload) => api.post('/data', payload);

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

import { fetchData, postData } from './api';

fetchData()
  .then(response => {
    console.log(response.data);
  });

postData({ key: 'value' })
  .then(response => {
    console.log(response.data);
  });

使用 Vue 的 async/await 语法

结合 async/await 简化异步代码：

methods: {
  async loadData() {
    try {
      const response = await axios.get('https://api.example.com/data');
      this.data = response.data;
    } catch (error) {
      console.error(error);
    }
  }
}

拦截器处理全局请求和响应

通过 axios 拦截器统一处理请求和错误：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      alert('Unauthorized');
    }
    return Promise.reject(error);
  }
);

使用 Vuex 管理 API 数据

在 Vuex 中调用 API 并更新状态：

// store.js
actions: {
  async fetchData({ commit }) {
    try {
      const response = await axios.get('https://api.example.com/data');
      commit('SET_DATA', response.data);
    } catch (error) {
      console.error(error);
    }
  }
}

组件中触发 Action：

this.$store.dispatch('fetchData');

环境变量配置 API 地址

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

VUE_APP_API_URL=https://api.example.com

代码中通过 process.env 访问：

axios.get(`${process.env.VUE_APP_API_URL}/data`);