vue 实现接口调用

安装 axios

在 Vue 项目中安装 axios，它是一个流行的 HTTP 客户端库，用于发送请求。可以通过 npm 或 yarn 安装：

npm install axios
# 或
yarn add axios

配置 axios 实例

创建一个单独的配置文件（如 src/api/axios.js）来配置 axios 实例，设置基础 URL 和拦截器：

import axios from 'axios';

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

// 请求拦截器
instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      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;

封装 API 模块

将接口按功能模块封装（如 src/api/user.js），便于维护：

import request from './axios';

export const login = (data) => request.post('/user/login', data);
export const getUserInfo = (id) => request.get(`/user/${id}`);

在组件中调用接口

在 Vue 组件中引入封装好的 API 方法，并通过生命周期钩子或事件触发调用：

import { getUserInfo } from '@/api/user';

export default {
  data() {
    return {
      user: null,
    };
  },
  async created() {
    try {
      this.user = await getUserInfo(123);
    } catch (error) {
      console.error('获取用户信息失败', error);
    }
  },
};

处理加载状态

添加加载状态提升用户体验，通过 v-if 或加载动画控制显示：

data() {
  return {
    isLoading: false,
    user: null,
  };
},
methods: {
  async fetchUser() {
    this.isLoading = true;
    try {
      this.user = await getUserInfo(123);
    } finally {
      this.isLoading = false;
    }
  },
},

错误处理

统一处理接口错误，例如通过拦截器或组件内捕获：

// 在 axios 拦截器中添加错误处理
instance.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

使用 Vuex 管理状态

对于全局状态（如用户信息），可以通过 Vuex 集中管理：

// store/modules/user.js
const actions = {
  async fetchUser({ commit }, userId) {
    const user = await getUserInfo(userId);
    commit('SET_USER', user);
  },
};

取消请求

在组件销毁时取消未完成的请求，避免内存泄漏：

import axios from 'axios';

export default {
  data() {
    return {
      cancelToken: null,
    };
  },
  methods: {
    fetchData() {
      this.cancelToken = axios.CancelToken.source();
      axios.get('/api/data', { cancelToken: this.cancelToken.token });
    },
  },
  beforeDestroy() {
    if (this.cancelToken) {
      this.cancelToken.cancel();
    }
  },
};