Ajax基础总结（思维导图+二维表）

比较项目

Axios 实现 Ajax

Promise 对象实现 Ajax（原生方式）

代码复杂度

较低，因为 Axios 已经封装了很多功能，代码简洁明了

较高，需要自己处理 XMLHttpRequest 的多个细节

功能丰富度

提供自动转换数据、拦截请求 / 响应、跨域支持等高级功能

主要实现基本的请求 - 响应功能，高级功能需自己实现

跨平台性

支持浏览器和 Node.js 环境

主要用于浏览器环境，在 Node.js 中需要做一些调整

对请求细节控制

相对较少，Axios 已经处理了很多底层细节

更多，可以深入定制请求的各个环节

比较项目

async和await

Promise

定义

async用于声明异步函数，返回Promise对象；await只能async函数内使用，暂停函数执行直到Promise状态改变

表示尚未完成（或可能已完成）的异步操作的对象，有三种状态，表示异步操作最终的完成（或失败）以及其结果值。

错误处理

在async函数中用try/catch块捕获await表达式中的错误

通过catch方法捕获Promise被reject后的错误

代码风格

让异步代码看起来更像同步代码，对于复杂异步流程（如多个异步操作顺序执行和错误处理）结构更清晰，减少嵌套

链式调用（then、catch等）可处理多个异步操作顺序和结果，但过多链式调用可能导致代码嵌套深、可读性差

相互关系

async函数返回Promise，await用于暂停async函数内部执行等待Promise状态改变，是基于Promise的语法糖

async和await基于Promise构建，用于更方便地处理Promise

get

post

请求的目的

通常用于从服务器检索（获取）数据。它不会修改服务器上的数据。

通常用于向服务器发送数据（如提交表单）。它可能会导致服务器上的数据被修改。

安全性

GET 方法的参数会暴露在 URL 中

而 POST 方法的参数则放在请求体中，相对安全一些。

参数长度限制

GET 方法的参数长度有限制，对于只传输少量数据的请求比较适用

POST 方法没有参数长度限制，适合传输大量数据。

请求的数据

请求的数据（如果有的话）会附加到URL的查询字符串中，并以键值对的形式出现（例如，?key1=value1&key2=value2）。这意味着GET请求的数据长度是有限制的（由浏览器和服务器共同决定，但通常较短），且不适合传输敏感信息（因为URL可能会记录在浏览器历史、服务器日志等地方）。

请求的数据会放在请求体中发送，这意味着它可以传输大量数据，且不会受到URL长度的限制。POST请求更适合传输敏感信息，因为请求体通常不会在浏览器历史或服务器日志中记录。

缓存

GET 方法的请求会被浏览器缓存，多次请求相同的 URL 时，有可能直接读取缓存中的结果

请求通常不会被缓存，因为每次POST请求都可能导致服务器上的数据被修改。

使用场景

通常用于检索数据、查询数据库等不需要修改服务器数据的场景。

通常用于提交表单、上传文件、创建新资源等需要修改服务器数据的场景。

比较项目

data 参数

params 参数

传输方式

放在请求体中传输

通过 URL 进行传输，拼接在 URL 末尾

使用场景

适用于 POST、PUT、PATCH 等非 GET 请求，用于向服务器提交数据以创建、更新或修改资源

主要用于 GET 请求，让服务器根据参数筛选、排序或返回特定资源

数据大小限制

相对没有严格的类似 URL 长度那样的限制（实际受服务器配置等因素影响），更适合大量数据传输

受 URL 长度限制，过长 URL 可能导致请求失败

安全性

不在 URL 中显示数据，一定程度上保护隐私和安全性，适合传递敏感信息

数据在 URL 上可见，不适合传递敏感信息如密码等

比较项

同步

异步

是什么

按顺序依次执行任务，后一个任务等待前一个完成。（不等于阻塞）

不等待任务完成就执行其他任务。

为什么要用

逻辑简单，保证数据一致性。

提高性能和效率，提升用户体验。

在哪用

简单计算、顺序依赖强的业务逻辑。

网络请求、文件操作、定时器和事件处理。

怎么用

按正常函数调用顺序执行。

用回调函数或 Promise（JS）、async/await（其他语言）。