vue中实现接口

在 Vue 中实现接口请求

Vue 本身不提供 HTTP 请求功能，通常需要借助第三方库如 axios 或 fetch。以下是具体实现方法：

使用 axios 发送请求

安装 axios：

npm install axios

在 Vue 组件中使用：

import axios from 'axios';

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

使用 fetch API

现代浏览器内置的 fetch 也可以直接使用：

export default {
  methods: {
    fetchData() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
    }
  }
}

封装 API 模块

建议将接口请求封装成独立模块（如 api.js）：

// api.js
import axios from 'axios';

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

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

组件中调用：

import api from './api';

export default {
  methods: {
    async loadData() {
      try {
        const response = await api.getData();
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
}

使用 Vuex 管理接口状态

对于复杂应用，可以结合 Vuex 管理异步状态：

// store.js
import Vuex from 'vuex';
import api from './api';

const store = new Vuex.Store({
  state: {
    data: null,
    loading: false
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data;
    },
    SET_LOADING(state, status) {
      state.loading = status;
    }
  },
  actions: {
    async fetchData({ commit }) {
      commit('SET_LOADING', true);
      try {
        const response = await api.getData();
        commit('SET_DATA', response.data);
      } finally {
        commit('SET_LOADING', false);
      }
    }
  }
});

处理跨域问题

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

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

请求时使用 /api 前缀：

axios.get('/api/data') // 会被代理到 http://api.example.com/data