AJAX fetch axios

AJAX

• 是传统的网络请求方式，通过js在后台与服务器进行数据异步交换。

• 异步通信：通过JS发送异步http请求到服务器，后台处理并返回数据，前端通过回调函数处理响应，无需刷新整个页面；

• 核心原理：

  • XMLHttpRequest 对象（XHR）
    • 核心是浏览器内置的XHR对象
    • XHR对象允许JS直接与服务器通信

• 工作流程：

  1. 创建XHR对象

     const xhr = new XMLHttpRequest()
     

  2. 初始化请求

     • 设置请求方法，url 和 是否是异步

     xhr.open('GET', 'https://api.example.com/data', true)
     

  3. 设置请求头（可选）

     • 发送JSON数据时，需要设置Content-Type

     xhr.setRequestHeader('Content-Type', 'application/json')
     

  4. 定义回调函数

     • 监听请求状态变化，处理响应数据

     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) { // 请求完成
             if (xhr.status === 200) { // 请求成功
                 // 处理响应成功后的事件
             } else {
                 console.log('请求失败', xhr.status)
             }
         }
     }
     

  5. 发送请求

     • 发送请求体（POST请求时传数据，GET请求传null）

     xhr.send(JSON.stringify({ key: 'value' })); // POST 请求示例
     

• readyState 状态码

  • 0 未初始化（未调用open）
  • 1 已打开（已调用open()，未调用send()）
  • 2 已发送（已调用send（），响应头已接收）
  • 3 接收中（响应体下载中）
  • 4 完成（整个响应已接收）

• HTTP 状态码

  • 200 请求成功
  • 404 资源未找到
  • 500 服务器内部错误

• 优点

  • 兼容性强
  • 进度监控：xhr.upload.onprogress 和 xhr.onprogress监听上传下载进度
  • 请求取消：xhr.abort()即可；

• 缺点：

  • 嵌套回调
  • 手动解析数据：JSON.parse(xhr.responseText)

Fetch API

• 现代浏览器支持基于Promise的fetch API

fetch('http://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log('请求成功', data))
    .catch(error => console.log('请求失败', error))

• 优点
  • 语法简介：基于Promise，链式调用
  • 支持流式数据
  • 默认CORS
• 缺点
  • 兼容性问题：不支持IE
  • 错误处理不直观：HTTP错误（如404）不会触发catch
  • 默认不携带：cookie，需要显示设置
  • 无进度监控

AJAX 和 Fetch 的区别

• 底层实现
  • AJAX 基于XHR对象
  • Fetch 基于Promise
• 复杂度
  • AJAX 需手动处理状态和回调
  • Fetch 链式调用更直观
• Cookie和凭证
  • AJAX 默认携带
  • Fetch 默认不携带，需设置credentials: 'include'
• 兼容性
  • AJAX 全兼容
  • Fetch 现代浏览器才兼容
• 错误处理
  • AJAX 用过状态码status手动处理
  • Fetch 默认认为HTTP错误（如404）不会触发catch，需手动处理
• 跨域请求
  • AJAX 需处理CORS，不支持复杂请求（预检测请求）
  • Fetch 天然支持CORS
• 流式数据
  • AJAX 不支持
  • Fetch 支持
• 请求取消
  • AJAX 支持xhr.abort()
  • Fetch 通过AbortController实现

axions

• 浏览器：基于XHR实现封装
• Node：基于http/https模块封装