xhr、fetch和axios

恶龙呼呼2025-05-30 19:27

XMLHttpRequest (XHR)

XMLHttpRequest 是最早用于在浏览器中进行异步网络请求的 API。它允许网页在不刷新整个页面的情况下与服务器交换数据。

javascript 复制代码 
// 创建 XHR 对象
const xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/json');

// 设置响应类型（可选）
xhr.responseType = 'json';

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 请求成功
      console.log('Response:', xhr.response);
    } else {
      // 请求失败
      console.error('Error:', xhr.status);
    }
  }
};

// 可选：处理错误
xhr.onerror = function() {
  console.error('Network error occurred');
};

// 发送请求
xhr.send();
  • 优点：广泛兼容、支持进度事件、功能全面
  • 缺点：API 复杂、回调嵌套问题（回调地狱）、不支持 Promise

回调地狱问题

javascript 复制代码 
// 第一个请求
const xhr1 = new XMLHttpRequest();
xhr1.open('GET', '/api/data1', true);
xhr1.onreadystatechange = function() {
  if (xhr1.readyState === 4 && xhr1.status === 200) {
    const data1 = JSON.parse(xhr1.responseText);
    
    // 第二个请求（依赖第一个请求的结果）
    const xhr2 = new XMLHttpRequest();
    xhr2.open('GET', `/api/data2?param=${data1.id}`, true);
    xhr2.onreadystatechange = function() {
      if (xhr2.readyState === 4 && xhr2.status === 200) {
        const data2 = JSON.parse(xhr2.responseText);
        
        // 第三个请求（依赖第二个请求的结果）
        const xhr3 = new XMLHttpRequest();
        xhr3.open('POST', '/api/submit', true);
        xhr3.setRequestHeader('Content-Type', 'application/json');
        xhr3.onreadystatechange = function() {
          if (xhr3.readyState === 4 && xhr3.status === 200) {
            const result = JSON.parse(xhr3.responseText);
            console.log('最终结果:', result);
          }
        };
        xhr3.send(JSON.stringify({ data1, data2 }));
      }
    };
    xhr2.send();
  }
};
xhr1.send();

为什么不能按顺序写 XHR 请求？

在异步编程中，代码的书写顺序 和执行顺序是两回事。当你按顺序写 XHR 请求时，它们会立即开始执行，但不会等待前一个请求完成。这会导致严重问题：

javascript 复制代码 
// 错误示例：按顺序写但不嵌套
const xhr1 = new XMLHttpRequest();
xhr1.open('GET', '/api/data1', true);
xhr1.onreadystatechange = function() { /* 处理 data1 */ };
xhr1.send();

const xhr2 = new XMLHttpRequest();
xhr2.open('GET', '/api/data2?param=???', true); // 这里需要 data1.id，但 data1 可能还没返回
xhr2.onreadystatechange = function() { /* 处理 data2 */ };
xhr2.send();

const xhr3 = new XMLHttpRequest();
xhr3.open('POST', '/api/submit', true);
xhr3.setRequestHeader('Content-Type', 'application/json');
xhr3.onreadystatechange = function() { /* 处理结果 */ };
xhr3.send(JSON.stringify({ data1, data2 })); // data1 和 data2 都可能不存在

为什么会出错？

  1. 数据依赖问题：

    • 第二个请求需要第一个请求的结果 (data1.id)

    • 第三个请求需要前两个请求的结果 (data1 和 data2)

  2. 执行顺序不确定：

    • 异步请求的完成时间不可预测

    • 即使请求 1 先发送，请求 2 和 3 可能先完成

  3. 闭包问题：

    • 回调函数中的变量会捕获外部作用域

    • 如果不嵌套，变量可能在回调执行时已被修改

嵌套的核心目的：确保执行顺序

通过嵌套回调，你实际上是在告诉程序：

"只有当请求 1 成功完成后，才开始请求 2；只有当请求 2 成功完成后，才开始请求 3"

解决方案

Fetch API

Fetch API 是现代浏览器提供的用于替代 XHR 的新标准，它基于 Promise，提供了更简洁、更强大的接口来处理网络请求。

主要特点：

  • 基于 Promise，避免回调地狱
  • 支持 async/await 语法
  • 提供 Request 和 Response 对象
  • 支持跨域请求和 CORS
  • 支持流式响应体处理

基本用法

javascript 复制代码 
// 简单的 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // 解析为 JSON
  })
  .then(data => {
    console.log('Response:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

// 使用 async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Response:', data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

// 带参数的 POST 请求
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

优缺点：

  • 优点：现代 API、基于 Promise、更简洁、支持流式处理
  • 缺点：不支持进度事件、错误处理需要额外检查状态码、旧浏览器兼容性差（需要 polyfill）

Fetch API 的局限性详解

1. 不支持进度事件

Fetch API 的主要设计目标是提供一个现代、简洁的网络请求接口，但它没有内置的进度事件支持。在上传或下载大文件时，这是一个明显的不足：

XHR 的进度支持 ：XHR 通过 onprogress 事件提供上传和下载进度：

javascript 复制代码 
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`上传进度: ${percentComplete}%`);
  }
};

Fetch 的替代方案 ：Fetch 需要使用更复杂的 ReadableStream API 来实现进度：

javascript 复制代码 
fetch('large-file.zip')
  .then(response => {
    const reader = response.body.getReader();
    const contentLength = response.headers.get('Content-Length');
    let receivedLength = 0;
    
    return new Response(new ReadableStream({
      async start(controller) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          receivedLength += value.length;
          const percentComplete = (receivedLength / contentLength) * 100;
          console.log(`下载进度: ${percentComplete}%`);
          controller.enqueue(value);
        }
        controller.close();
      }
    }));
  });
2. 错误处理需要额外检查状态码

Fetch API 的设计与传统 HTTP 错误处理模式不同：

  • Fetch 的错误处理机制 ：
    • 只有网络错误 （如断网、DNS 失败）才会触发 reject
    • HTTP 错误（如 404、500）不会触发 reject，而是返回一个状态码非 2xx 的 Response 对象
javascript 复制代码 
fetch('https://example.com/non-existent')
  .then(response => {
    // 这里会执行，即使服务器返回 404
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

XHR 的错误处理 ：XHR 的 onerror 事件会捕获网络错误，而 HTTP 错误通过状态码判断：

javascript 复制代码 
xhr.onerror = function() {
  console.error('网络错误');
};

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status >= 400) {
      console.error('HTTP 错误:', xhr.status);
    }
  }
};
3. 旧浏览器兼容性差（需要 polyfill）

AXIOS和fetch差别

Axios 是一个基于 Promise 的 HTTP 客户端，专为浏览器和 Node.js 设计。它与原生 Fetch API 有许多区别，这些区别影响着开发者的选择。

具体差异详解
1 错误处理

Axios：HTTP 错误（404、500 等）会直接 reject Promise

javascript 复制代码 
axios.get('/api/data')
  .then(response => {
    // 仅在 HTTP 状态码为 2xx 时执行
    console.log(response.data);
  })
  .catch(error => {
    // 处理所有错误（网络错误和 HTTP 错误）
    console.error('请求失败:', error.response?.status);
  });

Fetch：HTTP 错误不会 reject，需要手动检查状态码

在 Fetch 请求的 then 回调中，你需要检查 response.ok 属性或 response.status 状态码：

javascript 复制代码 
fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      // 手动抛出错误，使 Promise 被 reject
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 请求成功，继续处理响应
    return response.json();
  })
  .then(data => console.log('数据:', data))
  .catch(error => console.error('请求失败:', error));
2 数据格式处理

Axios：自动解析 JSON 响应

javascript 复制代码 
axios.get('/api/data')
  .then(response => {
    // response.data 已经是解析后的 JSON 对象
    console.log(response.data.name);
  });

Fetch：需要手动解析响应

javascript 复制代码 
fetch('/api/data')
  .then(response => response.json()) // 手动解析为 JSON
  .then(data => console.log(data.name));
3 请求取消

Axios ：使用 CancelToken

javascript 复制代码 
const source = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
.then(response => console.log(response))
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消:', thrown.message);
  }
});

// 取消请求
source.cancel('用户取消了请求');

Fetch ：使用 AbortController（需要现代浏览器支持）

javascript 复制代码 
const controller = new AbortController();
const signal = controller.signal;

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被取消');
    }
  });

// 取消请求
controller.abort();
4 进度事件

Axios：内置支持上传和下载进度

javascript 复制代码 
// 下载进度
axios.get('/large-file', {
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`下载进度: ${percentCompleted}%`);
  }
});

// 上传进度
axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上传进度: ${percentCompleted}%`);
  }
});

Fetch：需要使用 ReadableStream 手动实现

javascript 复制代码 
fetch('/large-file')
  .then(response => {
    const contentLength = response.headers.get('Content-Length');
    const reader = response.body.getReader();
    let receivedLength = 0;
    
    return new Response(new ReadableStream({
      async start(controller) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          receivedLength += value.length;
          const percentComplete = (receivedLength / contentLength) * 100;
          console.log(`下载进度: ${percentComplete}%`);
          controller.enqueue(value);
        }
        controller.close();
      }
    }));
  });
5 拦截器

Axios：支持请求和响应拦截器，便于统一处理

javascript 复制代码 
// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 处理未授权情况
    }
    return Promise.reject(error);
  }
);

Fetch：不直接支持拦截器，需要手动实现

javascript 复制代码 
function fetchWithInterceptor(url, options) {
  // 请求拦截
  const modifiedOptions = {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${token}`
    }
  };
  
  return fetch(url, modifiedOptions)
    .then(response => {
      // 响应拦截
      if (response.status === 401) {
        // 处理未授权情况
      }
      return response;
    });
}
相关推荐
pianmian13 小时前
3D Tiles高级样式设置与条件渲染(3)
linux·服务器·前端
资深前端之路3 小时前
vue+threeJs 绘制3D圆形
前端·javascript·vue.js
Nymph_Zhu3 小时前
vue3+element-plus el-date-picker日期、年份筛选设置本周、本月、近3年等快捷筛选
前端·vue.js·elementui
极客密码4 小时前
DeepSeek-R1-0528，官方的端午节特别献礼
前端·ai编程·deepseek
打小就很皮...4 小时前
npm、pnpm、yarn使用以及区别
前端·npm·yarn
FungLeo4 小时前
vue2 + webpack 老项目升级 node v22 + vite + vue2 实战全记录
前端·webpack·vue2·vie·webpack 升级 vite
西洼工作室4 小时前
使用原生前端技术封装一个组件
前端·js
xiaofann_4 小时前
【数据结构】单链表练习
linux·前端·数据结构
烛阴5 小时前
为什么选择Day.js？比Moment.js更轻更快的日期处理神器
前端·javascript
moyu845 小时前
从 XMLHttpRequest 到 Fetch：AJAX 请求的演进与最佳实践
前端·javascript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06DeepSeek各版本说明与优缺点分析07Trae AI 开发工具使用手册08Coze扣子平台完整体验和实践（附国内和国际版对比）09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10ImageJ软件使用教程（二）：图像测量