前端常用的几种请求方式

本文作者系360奇舞团前端开发工程师

前端数据请求方式主要包括XMLHttpRequest、Fetch、Axios、WebSocket等。这些请求方式各有特点，适用于不同的场景。本文将从综合性能、优缺点、最佳使用场景以及使用方式的角度对这些数据请求方式进行分析。

介绍

XMLHttpRequest（XHR）

XMLHttpRequest 是前端最早使用的数据请求方式。它支持异步请求，可以通过设置回调函数处理请求完成后的数据。

性能：XHR 在较早的浏览器中表现良好，但随着浏览器性能的提升，其性能瓶颈逐渐凸显。相较于其他请求方式，XHR 的性能稍逊一筹。

优点：

• 广泛的浏览器支持：尽管现代浏览器更推荐使用 Fetch API，但 XMLHttpRequest 仍然得到了几乎所有浏览器的支持，包括一些较旧的版本。

• 事件驱动：XMLHttpRequest 使用事件驱动模型，提供了 onreadystatechange、onload、onerror 等事件，可以方便地监听请求的不同阶段。

• 支持上传进度监控：XMLHttpRequest 提供了 upload 属性，可以用来监控文件上传的进度。

• 支持请求和响应头访问：可以通过 setRequestHeader 和 getResponseHeader 方法来设置和获取请求和响应的头信息。

• 支持超时设置：可以通过 timeout 属性设置请求的超时时间，并在超时后触发 ontimeout 事件。

• 支持同步请求：虽然不推荐，但 XMLHttpRequest 支持同步请求，这在某些特定的场景下可能有用。

缺点：

• 语法复杂：相比于 Fetch API，XMLHttpRequest 的语法更加复杂，使用起来不够直观。

• 基于回调：XMLHttpRequest 使用回调函数来处理响应，这可能导致回调地狱（callback hell），代码难以维护。

• 不支持 Promise：XMLHttpRequest 不直接支持 Promise，需要手动封装或使用第三方库来实现 Promise 风格的调用。

• 取消请求不够优雅：虽然 XMLHttpRequest 支持通过 abort 方法取消请求，但这并不是一个优雅的解决方案，因为它会导致请求被突然终止。

• 跨域问题：默认情况下，XMLHttpRequest 不支持跨域请求，需要服务器配置 CORS 头或者在客户端使用代理。

最佳使用场景：对于一些老旧项目或者需要与多种后端系统交互的场景，使用 XHR 可以保证兼容性。

使用方式：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://xxx', true