当前位置：首页 > VUE

vue实现api

2026-01-13 03:15:12VUE

Vue 实现 API 调用的方法

使用 Axios 发送 HTTP 请求

安装 Axios 依赖：

npm install axios

在 Vue 组件中引入并使用 Axios：

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);
        });
    }
  }
}

使用 Vue Resource（已废弃）

Vue Resource 是早期的官方推荐库，现已不再维护，但部分旧项目可能仍在使用：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

this.$http.get('https://api.example.com/data').then(response => {
  console.log(response.body);
}, error => {
  console.error(error);
});

使用 Fetch API

现代浏览器原生支持的 Fetch API：

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

封装 API 服务

创建独立的 API 服务文件（如 api.js）：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' }
});

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

使用 Vuex 管理 API 状态

结合 Vuex 的状态管理：

// store/actions.js
import api from '../services/api';

export default {
  async fetchData({ commit }) {
    try {
      const response = await api.getData();
      commit('SET_DATA', response.data);
    } catch (error) {
      console.error(error);
    }
  }
}

处理跨域问题

配置 vue.config.js 解决开发环境跨域：

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

使用 async/await 语法

更现代的异步处理方式：

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

添加请求拦截器

全局处理请求和响应：

vue实现api

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

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    router.push('/login');
  }
  return Promise.reject(error);
});