vue3的axios详解

### Vue 3 中 Axios 的详细介绍

#### 创建 Axios 实例
为了更好地管理配置项以及拦截器，在项目初始化时创建一个全局的 Axios 实例是一个不错的选择。这允许设置默认的基础 URL 或者其他公共参数。

import axios from 'axios';

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // 设置统一的请求前缀
  timeout: 5000                              // 超时时间
});

#### 配置请求与响应拦截器
通过添加自定义逻辑到请求发送之前和接收到服务器响应之后的过程里，可以实现诸如身份验证令牌自动附加等功能。

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 添加响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => {
    Message.error(error.message);
    return Promise.reject(error);
  }
);

#### 封装 API 接口
按照业务模块划分不同的 JavaScript 文件夹结构有助于保持项目的整洁有序。每个文件内只负责特定领域内的服务调用操作，并且隐藏内部的具体实现细节[^4]。

例如针对用户管理部分：

export function login(data) {
  return service({
    url: '/auth/login',
    method: 'post',
    data
  });
}

export function getInfo() {
  return service({
    url: '/user/info',
    method: 'get'
  });
}

#### 错误处理机制
当遇到网络问题或者其他类型的异常情况时，应该合理地捕获这些错误并在界面上给予反馈提示给最终使用者。可以通过 try-catch 结构配合 async-await 关键字简化异步编程模型下的错误捕捉过程[^1]。

async function fetchData() {
  try {
    let res = await getUserInfo();
    console.log(res);
  } catch (err) {
    setError(err.message); // 更新组件中的 error 属性用于展示错误消息
  }
}

#### 动态更新界面状态
除了成功获取的数据外，还需要考虑加载中、失败后的不同视图切换需求。通常会准备三个布尔型的状态变量来控制这部分UI的变化：loading(正在加载), loaded(已加载完成)，error(发生错误)。

<template>
  <div v-if="loaded">
    <!-- 正常渲染 -->
  </div>
  <p v-else-if="!loading && !error">暂无数据</p>
  <p v-else-if="error">{{ error }}</p>
  <LoadingIndicator v-else />
</template>

<script setup lang="ts">
import { ref } from "vue";

let loading = ref(true),
  loaded = ref(false),
  error = ref(null as string | null);

fetchData().then(() => {
  loading.value = false;
  loaded.value = true;
}).catch((e) => {
  loading.value = false;
  error.value = e.toString();
});
</script>