前端异步原理与AJAX 接口请求基础

一、前端同步与异步概念

1. 同步执行

代码自上而下依次执行，上一行代码执行完毕，才会执行下一行，阻塞后续代码执行，适合简单逻辑处理。

2. 异步执行

耗时操作（接口请求、定时器、文件读取）放入异步队列，不会阻塞主线程，主线程继续执行后续代码，异步任务完成后回调执行，是前端交互的核心机制。

常见异步场景：定时器setTimeout、AJAX接口请求、文件上传、事件监听。

二、回调地狱问题

多层异步嵌套回调函数，代码层级过深、可读性差、难以维护，ES6 Promise、ES7 async/await 专门解决此问题。

三、AJAX 核心原理

AJAX（异步JavaScript和XML），核心作用：无需刷新整个页面，局部更新页面数据，实现前后端数据交互。

1. 原生AJAX 四步流程

• 创建XMLHttpRequest 请求对象；

• 初始化请求参数（请求方式、接口地址、是否异步）；

• 监听请求状态变化，处理返回结果；

• 发送请求到后端服务器。

2. 常用请求方式

• GET：参数拼接在URL上，参数可见、有缓存，适合查询数据；

• POST：参数放在请求体中，安全无缓存，适合提交、修改数据。

四、现代异步解决方案

1. Promise

链式调用替代嵌套回调，支持多个异步串行/并行执行，解决回调地狱。

2. async/await（ES7）

基于Promise的语法糖，以同步写法实现异步操作，代码最简洁、可读性最高，是目前项目主流用法。

五、开发注意事项

1. 异步代码执行顺序不可按书写顺序判断，需理解事件循环机制；

2. 接口请求必须处理异常捕获，避免页面报错崩溃；

3. 新项目优先使用async/await 处理异步请求，替代原生AJAX和回调函数。