前端与后端通讯的演变：从 AJAX 到现代 HTTP 客户端

最新推荐文章于 2024-09-15 17:15:28 发布

G探险者

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量1.1k

点赞数 28

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_34050399/article/details/141114168

版权

大家好，我是G探险者！

随着 Web 技术的发展，前端与后端之间的通讯方式经历了多个阶段的演变。所以很有必要梳理一下这个演变过程。

这篇文章将介绍前端如何与后端服务进行通讯，从早期的 AJAX 技术，到现代的 HTTP 客户端（如 axios 和 fetch），并探讨这些技术是如何改变前端开发实践的。

1. 初期阶段：表单提交与页面刷新

在早期的 Web 开发中，前端与后端的通讯主要依赖于 HTML 表单和页面刷新。当用户在浏览器中提交表单时，表单数据会通过 HTTP 请求发送到后端服务器，后端处理请求并返回一个新的 HTML 页面，浏览器会刷新并展示新的内容。

这种方法的缺点显而易见：每次通讯都需要刷新整个页面，用户体验较差，尤其是在网络条件较差的情况下。随着 Web 应用的复杂性增加，开发者们开始寻求一种更高效、更流畅的通讯方式。

2. AJAX 的兴起

AJAX（Asynchronous JavaScript and XML）技术的出现，标志着前端与后端通讯方式的重大转变。通过 AJAX，前端可以在不刷新整个页面的情况下，与后端进行异步通讯，动态更新页面内容。

2.1 什么是 AJAX？

AJAX 是一组技术的组合，包括：

XMLHttpRequest：用于在后台与服务器交换数据。
JavaScript：用于处理响应并更新网页内容。
XML 或 JSON：作为数据交换格式（现代应用中，JSON 更为流行）。

2.2 AJAX 的实现示例

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

AJAX 的使用显著提升了用户体验，使得网页可以部分更新，而无需刷新整个页面。然而，XMLHttpRequest 的使用有一定的复杂性和局限性，例如回调地狱、链式回调不友好等问题。

3. jQuery 的封装与简化

为了简化 AJAX 的使用，jQuery 库应运而生。jQuery 对 XMLHttpRequest 进行了封装，提供了更简单、更直观的 API，使得前端开发者能够更方便地与后端进行通讯。

3.1 jQuery 的 AJAX 示例

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.log('Error:', error);
    }
});

jQuery 的流行进一步推动了 AJAX 的广泛使用，并成为 Web 开发的事实标准。然而，随着前端开发的复杂度进一步提升，开发者对更加现代化、模块化的 HTTP 客户端的需求也逐渐显现。

4. `fetch` API：现代浏览器的原生解决方案

为了解决 XMLHttpRequest 的局限性，现代浏览器引入了 fetch API，它是一个更强大、基于 Promise 的 HTTP 客户端，提供了更简单的 API 和更好的可扩展性。

4.1 `fetch` API 的使用

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

fetch API 不仅简化了异步操作，还内置了对 JSON 解析的支持，使得代码更加简洁。此外，fetch API 采用了 Promise 的方式来处理异步操作，避免了回调地狱的问题。

4.2 `fetch` 的不足

尽管 fetch API 更加现代化，但它也有一些不足之处，例如：

fetch 不会自动处理 HTTP 请求中的错误状态码（如 404 或 500），需要开发者手动处理。
fetch 的默认行为不支持跨域请求时的 Cookie，因此需要手动设置 credentials 选项。

5. `axios`：现代 Web 开发的首选 HTTP 客户端

axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js。它弥补了 fetch API 的一些不足，并提供了更多高级特性，如请求和响应拦截器、取消请求、自动转换 JSON 数据、并发请求等。

5.1 `axios` 的基本用法

import axios from 'axios';

axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

5.2 `axios` 的高级功能

请求拦截器和响应拦截器：允许在请求或响应被处理之前，对其进行修改或日志记录。

axios.interceptors.request.use(config => {
    // 在请求发送前做一些处理
    return config;
}, error => {
    return Promise.reject(error);
});

取消请求：可以使用 CancelToken 来取消正在进行的请求。

const source = axios.CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

自动处理 JSON 数据：axios 会自动将响应数据转换为 JavaScript 对象。

6. 几种技术的对比

以下是对前端与后端通讯技术的特点进行对比的矩阵表格：

特性/技术	表单提交与页面刷新	AJAX（原生 XMLHttpRequest）	jQuery AJAX	`fetch` API	`axios`
异步通讯	否	是	是	是	是
页面刷新	是	否	否	否	否
回调地狱	不适用	有可能	有可能	无	无
Promise 支持	否	否	否	是	是
支持的浏览器	所有现代浏览器	所有现代浏览器	所有现代浏览器	现代浏览器	所有现代浏览器和 Node.js
API 复杂性	简单	中等	简单	简单	简单
JSON 支持	否	需要手动解析	自动解析（内置）	自动解析	自动解析
跨域支持	否（仅同源）	是	是	是（部分场景需配置）	是
错误处理	简单（页面刷新显示错误）	需要手动处理	需要手动处理	需要手动处理	自动处理（更灵活）
请求拦截器	否	否	否	否	是
响应拦截器	否	否	否	否	是
取消请求	否	否	否	部分支持	是
模块化支持	否	否	是（需依赖 jQuery）	是	是
可扩展性	低	中等	中等	高	高
使用难度	简单	中等	简单	简单	简单

解释：

表单提交与页面刷新：传统的前端与后端通讯方式，通过提交表单和刷新页面实现数据传输。
AJAX（原生 XMLHttpRequest）：提供异步通讯能力，但需要手动处理回调和数据解析，相对复杂。
jQuery AJAX：对原生 AJAX 进行了封装，简化了 API，适合不使用现代框架的项目。
fetch API：现代浏览器的原生 API，基于 Promise，简洁易用，但在错误处理和跨域请求时有一定限制。
axios：现代 Web 开发的首选 HTTP 客户端，功能强大，支持请求/响应拦截器、取消请求、自动处理 JSON 等功能，且兼容浏览器和 Node.js 环境。