AJAX与Axios基础

一、AJAX 核心概念解析

1.1 AJAX 的核心概念

1.2 AJAX 工作原理

1.3 AJAX 局限性

二、axios 库介绍

2.1 Axios 核心特性

2.2 快速上手

2.3 核心配置项

2.4 错误处理标准方案

三、Axios 核心配置项

3.1 常用核心配置项

1. url

2. method

3. params

4. data

5. headers

3.2 完整配置示例

3.3 关键区别总结

3.4 注意事项

四、Axios常用HTTP方法

4.1 GET 请求（获取数据）

1. 基础用法

2. 带查询参数

3. async/await 写法

4.2 POST 请求（创建数据）

1. 提交 JSON 数据

2. 提交 FormData（文件上传）

4.3 PUT 请求（全量更新）

4.4 PATCH 请求（部分更新）

4.5 DELETE 请求（删除数据）

4.6 完整配置示例

4.7 关键区别总结

4.8 注意事项

五、接口文档规范与使用

5.1 标准接口文档要素

5.2 文档使用示例

六、form-serialize 高效表单处理

6.1 form-serialize 插件语法

6.2 使用示例

6.3 注意事项

一、AJAX 核心概念解析

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。它通过异步通信提升用户体验，现已成为现代 Web 开发的核心技术之一。

1.1 AJAX 的核心概念

异步通信：浏览器在后台发送请求，不阻塞用户界面。
数据格式：早期使用 XML，现主流为 JSON。
无刷新更新：仅更新页面局部内容，减少流量消耗。

1.2 AJAX 工作原理

用户触发事件（如点击按钮）。
创建请求对象：浏览器通过 XMLHttpRequest 或 Fetch API 发起请求。
发送请求：向服务器发送 HTTP 请求（GET/POST）。
服务器处理：服务器接收请求并返回数据（JSON/XML/HTML）。
接收响应：客户端处理返回数据，更新 DOM。

1.3 AJAX 局限性

代码冗余：需手动处理 XHR 状态、错误、超时等逻辑。
回调地狱：多层异步操作嵌套，代码可读性差。
功能有限：缺少自动 JSON 转换、拦截器、取消请求等现代特性。

代码冗余：需手动处理 XHR 状态、错误、超时等逻辑。
回调地狱：多层异步操作嵌套，代码可读性差。
功能有限：缺少自动 JSON 转换、拦截器、取消请求等现代特性。

二、axios 库介绍

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，用于浏览器和 Node.js 环境。它简化了 AJAX 请求的发送与响应处理，支持拦截器、取消请求、自动转换 JSON 数据等高级功能，是前端开发中最流行的 HTTP 请求工具之一。

2.1 Axios 核心特性

基于 Promise：支持 async/await 和链式调用。
浏览器 & Node.js：全平台兼容（浏览器使用 XMLHttpRequest，Node.js 使用 http 模块）。
自动数据转换：自动将请求/响应数据转换为 JSON 或其他格式。
拦截器：全局拦截请求和响应，实现统一处理（如添加 Token）。
取消请求：支持请求取消功能，避免资源浪费。
并发处理：提供 axios.all 和 axios.spread 处理并发请求。

2.2 快速上手

引入：

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

语法：

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

示例：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  axios({
    url: 'https://api.example.com/data',
    method: 'GET',
    params: { page: 1 }
  }).then(response => {
    console.log(response.data);
  });
</script>

2.3 核心配置项

参数	说明	类型
url	请求地址	string
method	请求方法（默认GET）	string
params	URL 查询参数	object
data	请求体数据	object
headers	自定义请求头	object

2.4 错误处理标准方案

axios.post('/api/login', credentials)
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    console.error('错误详情:', error.response?.data);
    alert(error.response?.data.message || '请求失败');
  })
  .finally(() => {
    // 通用清理逻辑
  });

三、Axios 核心配置项

3.1 常用核心配置项

参数	说明	类型
url	请求地址	string
method	请求方法（默认GET）	string
params	URL 查询参数	object
data	请求体数据	object
headers	自定义请求头	object

1. `url`

作用：目标资源的 URL 地址（必需项）。
格式：
- 绝对路径：https://api.example.com/users
- 相对路径：/api/users（需配合 baseURL 配置使用）。

示例：

axios({
  url: '/users',
  baseURL: 'https://api.example.com', // 实际 URL → https://api.example.com/users
});

2. `method`

作用：指定 HTTP 请求方法（默认 GET）。
可选值：GET、POST、PUT、DELETE、PATCH 等。

示例：

axios({
  method: 'POST',
  url: '/submit',
  data: { name: 'John' }
});

3. `params`

作用：设置 URL 查询参数（仅用于 GET 等支持查询参数的方法）。
特点：
- 参数会被自动序列化为 ?key1=value1&key2=value2。
- 支持对象或 URLSearchParams 格式。

示例：

axios.get('/search', {
  params: {
    keyword: 'axios',
    page: 2
  }
});
// 实际 URL → /search?keyword=axios&page=2

4. `data`

作用：设置请求体数据（用于 POST、PUT、PATCH 等方法）。
特点：
- 数据格式由 headers['Content-Type'] 决定：
  - application/json：传递 JSON 对象（Axios 默认自动转换）。
  - multipart/form-data：传递 FormData（常用于文件上传）。
  - application/x-www-form-urlencoded：传递 URL 编码字符串。

示例：

// 提交 JSON 数据
axios.post('/users', {
  name: 'Alice',
  age: 25
});

// 提交 FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

5. `headers`

作用：自定义 HTTP 请求头。
常见场景：
- 身份认证（Authorization）。
- 设置内容类型（Content-Type）。
- 跨域相关头（如 CORS）。

示例：

axios.post('/auth/login', { username: 'admin', password: '123' }, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123', // JWT 认证
    'X-Custom-Header': 'value'          // 自定义头
  }
});