html axios请求库集成

2026-04-28 22:00:08 1654阅读 0评论

在 HTML 页面里优雅集成 Axios：前后端协作的落地指南

在前端页面中发起网络请求，最常见的是用原生的 fetch 或者 jQuery.ajax。但当你需要在浏览器环境使用更强大的拦截、重试、错误处理与请求/响应改造时，Axios 会是更自然的选择。在 HTML 页面里直接集成 Axios，不依赖构建工具或打包流程，能让你在页面加载时就拿到可复用的请求模块，特别适合小型项目或页面级交互。

为什么要用 Axios

Axios 在浏览器端提供基于 Promise 的请求，支持拦截器、请求和响应的转换，以及更细粒度的错误处理，这些能力能让你在不做复杂配置的情况下，沉淀出可复用的请求模块。尤其在需要统一设置请求头、统一处理错误提示的场景下，比原生 fetch 要更直观。

在 HTML 中引入 Axios

最直接的方式是在 HTML 文件中通过 CDN 引入 Axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></axios>

这样无需构建或打包，项目可直接运行。

创建请求模块

将请求逻辑抽象成模块，放在一起管理，比把每条请求代码写在 HTML 或 JS 文件里更清晰。

// axiosConfig.js
const apiBase = 'https://api.example.com';

const createAxiosInstance = () => {
  return axios.create({
    baseURL: apiBase,
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    }
  });
};

// 请求拦截器
createAxiosInstance().interceptors.request.use(
  (config) => {
    // 这里可以统一添加 token 或其他动态头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
createAxiosInstance().interceptors.response.use(
  (response) => {
    // 这里可以统一处理响应数据格式
    return response.data;
  },
  (error) => {
    // 统一错误提示或处理
    console.error('请求失败:', error);
    return Promise.reject(error);
  }
);

export default createAxiosInstance();

具体请求示例

在需要发起请求的地方，直接使用这个实例即可：

<div id="app">
  <button @click="fetchData">加载数据</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
import axios from 'axios';

// 引入你创建的 Axios 实例
import { createAxiosInstance } from './axiosConfig';

const instance = createAxiosInstance();

function fetchData() {
  instance.get('/users')
    .then((response) => {
      console.log('数据:', response);
      // 在页面上更新内容
    })
    .catch((error) => {
      console.error('请求失败:', error);
      alert('加载数据失败，请稍后重试');
    });
}
</script>