前端
后端
AI
随笔
前端
后端
AI
随笔

一、为什么要异步编程？

在 JavaScript 的单线程世界里，任何耗时操作（比如网络请求、文件读写）如果用同步方式，会阻塞代码执行，导致页面卡顿。异步编程的本质是通过“推迟执行”或“事件驱动”来解决这个问题，让程序在等待结果时可以继续处理其他任务。

从第一性原理看，异步的核心是时间管理：如何在不确定的时间点（比如服务器响应）到来时，高效地处理结果，同时保证代码逻辑清晰、不出错。这就引出了异步编程的几种实现方式。

二、异步编程的实现方式

以下是 JavaScript 中常用的异步编程方式，每种方式都有其独特的应用场景和优缺点。我们将逐一拆解，并提供代码示例。

1. 回调函数 (Callbacks)

原理：回调函数是最早的异步处理方式。简单来说，就是把一个函数（回调）作为参数传给另一个函数，等异步操作完成后调用这个回调函数。

代码示例：

function fetchData(url, callback) {
  setTimeout(() => {
    callback(null, { data: '模拟数据' }) // 模拟异步请求
  }, 1000)
}

fetchData('https://api.example.com/data', (err, result) => {
  if (err) {
    console.error('出错了:', err)
    return
  }
  console.log('获取到数据:', result)
})

优点：

  • 简单直接，适合小型脚本或简单逻辑。
  • 浏览器和 Node.js 都支持，兼容性极强。

缺点：

  • 当多个异步操作嵌套时，会形成“回调地狱”，代码可读性和维护性变差。
  • 错误处理繁琐，容易漏掉错误捕获。

适用场景：适合简单、单次的异步操作，比如老项目或轻量脚本。

2. Promise

原理：Promise 是对异步操作的封装，表示一个未来会完成（或失败）的操作。它有三种状态：pending（等待）、fulfilled（成功）、rejected（失败）。通过 then 和 catch 方法处理结果。

代码示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: '模拟数据' }) // 模拟成功
      // reject(new Error('请求失败')) // 模拟失败
    }, 1000)
  })
}

fetchData('https://api.example.com/data')
  .then(result => console.log('获取到数据:', result))
  .catch(err => console.error('出错了:', err))

优点：

  • 解决了回调地狱，链式调用更清晰。
  • 错误处理更集中，catch 能捕获整个链条的错误。
  • 现代浏览器的标准 API，广泛支持。

缺点：

  • 代码量比回调稍多。
  • 对于复杂逻辑，链式调用仍可能显得冗长。

适用场景：大多数现代异步场景，比如网络请求、定时器等。

3. async/await

原理：async/await 是 Promise 的语法糖，让异步代码看起来像同步代码。它通过 async 声明异步函数，await 暂停执行直到 Promise 解决。

代码示例：

async function fetchData() {
  try {
    const response = await new Promise(resolve => {
      setTimeout(() => resolve({ data: '模拟数据' }), 1000)
    })
    console.log('获取到数据:', response)
  } catch (err) {
    console.error('出错了:', err)
  }
}

fetchData()

优点：

  • 代码简洁直观，像写同步代码一样。
  • 错误处理用 try/catch，更符合传统编程习惯。
  • 便于调试，逻辑更易理解。

缺点：

  • 需要对 Promise 有一定理解。
  • 不当使用（如过多 await）可能降低性能。

适用场景：几乎所有需要异步操作的场景，尤其是需要串行执行多个异步任务时。

4. 生成器函数 (Generators)

原理：生成器函数通过 function* 声明，可以暂停和恢复执行。yield 关键字用于暂停，返回一个迭代器对象。通过外部执行器控制异步流程。

代码示例：

function* fetchDataGenerator() {
  try {
    const result1 = yield new Promise(resolve => {
      setTimeout(() => resolve({ id: 1 }), 1000)
    })
    console.log('第一步完成:', result1)
    
    const result2 = yield new Promise(resolve => {
      setTimeout(() => resolve({ id: 2 }), 1000)
    })
    console.log('第二步完成:', result2)
    
    return { result1, result2 }
  } catch (error) {
    console.log('出错了:', error)
  }
}

// 执行器
function run(generator) {
  const iterator = generator()
  
  function handle(yielded) {
    if (yielded.done) return yielded.value
    
    return Promise.resolve(yielded.value)
      .then(data => handle(iterator.next(data)))
      .catch(err => handle(iterator.throw(err)))
  }
  
  return handle(iterator.next())
}

run(fetchDataGenerator)

优点：

  • 灵活控制异步流程，适合复杂逻辑。
  • 可以暂停和恢复，适合需要分步执行的场景。

缺点：

  • 需要额外执行器，代码复杂度较高。
  • 不如 async/await 直观，学习曲线较陡。

适用场景：特殊场景（如需要暂停/恢复的异步流程），或搭配库（如 co）使用。

5. 事件监听 (Event Listeners)

原理：通过监听 DOM 事件或自定义事件，触发异步操作。适合用户交互或重复触发的场景。

代码示例：

const button = document.querySelector('#myButton')
button.addEventListener('click', async () => {
  console.log('按钮被点击了')
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const data = await response.json()
  console.log('获取到数据:', data)
})

优点：

  • 天然适合用户交互场景（如点击、输入）。
  • 事件驱动模型直观，易于扩展。

缺点：

  • 事件管理复杂时，需注意内存泄漏（如未移除监听器）。
  • 不适合非事件驱动的异步逻辑。

适用场景：DOM 事件处理、用户交互触发异步操作。

6. 响应式编程 (RxJS)

原理：响应式编程通过“数据流”管理异步事件，RxJS 是其代表库。数据流可以被订阅、转换、过滤，非常适合复杂事件处理。

代码示例：

import { fromEvent } from 'rxjs'
import { debounceTime, map } from 'rxjs/operators'

const searchInput = document.querySelector('#search')
const searchInputs$ = fromEvent(searchInput, 'input')

searchInputs$.pipe(
  map(event => event.target.value),
  debounceTime(500)
).subscribe(async searchTerm => {
  console.log('搜索词:', searchTerm)
  const response = await fetch(`https://api.example.com/search?q=${searchTerm}`)
  const data = await response.json()
  console.log('搜索结果:', data)
})

优点：

  • 强大的数据流处理能力，适合复杂事件逻辑。
  • 支持丰富的操作符（如 map、filter、debounceTime）。
  • 可在浏览器和 Node.js 中使用。

缺点：

  • 学习曲线陡峭，概念较多。
  • 引入外部库，增加项目体积。

适用场景：复杂事件处理（如搜索防抖、实时数据流）、跨组件状态管理。

三、前端请求发送的方式

前端开发离不开与后端的通信，发送请求是核心技能。以下是几种常见的请求发送方式，结合异步编程的特点，我们逐一分析。

1. Fetch API

原理：Fetch 是浏览器内置的现代请求 API，基于 Promise，支持 GET、POST 等 HTTP 方法。它是 AJAX 的现代标准。

代码示例：

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    if (!response.ok) throw new Error('网络错误')
    const data = await response.json()
    console.log('获取到数据:', data)
  } catch (err) {
    console.error('出错了:', err)
  }
}

getData()

优点：

  • 浏览器原生支持，无需额外库。
  • 基于 Promise，结合 async/await 代码简洁。
  • 支持流式处理（如 response.body.getReader()）。

缺点：

  • 默认不处理 HTTP 错误（如 404、500 不触发 catch）。
  • 不支持请求取消、超时等高级功能，需手动实现。
  • 默认不携带 Cookie，需设置 credentials。

适用场景：现代项目中需要轻量、标准的请求方式。

2. XMLHttpRequest (XHR)

原理：XMLHttpRequest 是 AJAX 的“老祖宗”，通过事件回调处理请求。虽然功能强大，但 API 较为繁琐。

代码示例：

function getData() {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1')
  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('获取到数据:', JSON.parse(xhr.responseText))
    } else {
      console.error('出错了:', xhr.statusText)
    }
  }
  xhr.onerror = () => console.error('网络错误')
  xhr.send()
}

getData()

优点：

  • 支持进度事件（如上传进度监控）。
  • 兼容性极好，适合老旧浏览器。
  • 支持超时设置等高级功能。

缺点：

  • 基于回调，代码冗长。
  • API 设计老旧，维护性差。

适用场景：需要兼容老浏览器，或特定功能（如进度监控）。

3. Axios

原理：Axios 是基于 Promise 的第三方库，封装了 Fetch 和 XHR 的优点，提供了更便捷的 API。

代码示例：

import axios from 'axios'

async function getData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
    console.log('获取到数据:', response.data)
  } catch (err) {
    console.error('出错了:', err.message)
  }
}

getData()

优点：

  • 自动处理 JSON 数据。
  • 支持请求/响应拦截器，方便统一处理（如添加 token）。
  • 自动抛出 HTTP 错误，错误处理更直观。
  • 支持请求取消、超时等高级功能。

缺点：

  • 需要引入外部库，增加项目体积。
  • 学习成本略高于 Fetch。

适用场景：需要功能丰富、开发效率高的场景，浏览器和 Node.js 通用。

4. 其他方式

  • 表单提交：传统 <form> 提交会刷新页面，可通过 event.preventDefault() 结合 AJAX 实现异步提交。
const form = document.querySelector('#myForm')
form.addEventListener('submit', async event => {
  event.preventDefault()
  const formData = new FormData(form)
  const response = await fetch('/submit', {
    method: 'POST',
    body: formData
  })
  console.log('提交结果:', await response.json())
})
  • 资源标签请求：<img>、<script>、<link> 等标签的 src 或 href 属性会触发 GET 请求，适合加载静态资源。
  • WebSocket：用于实时双向通信，适合聊天、实时数据更新等场景。
const socket = new WebSocket('ws://example.com')
socket.onmessage = event => console.log('收到消息:', event.data)
socket.send('发送消息')
  • Server-Sent Events (SSE)：服务器单向推送数据，适合消息通知、实时状态更新。
const source = new EventSource('/events')
source.onmessage = event => console.log('收到事件:', event.data)

四、如何选择合适的异步方式和请求方法？

选择异步编程方式和请求发送方法时，可以从以下几个维度考虑：

  1. 项目需求：
    • 简单异步操作：用 async/await 或 Promise。
    • 复杂事件流：考虑 RxJS。
    • 用户交互：事件监听结合 async/await。
    • 实时通信：WebSocket 或 SSE。
  2. 代码可读性：
    • 优先选择 async/await，直观且易于维护。
    • 避免回调地狱，尽量用 Promise 或 async/await 替代回调。
  3. 性能与兼容性：
    • 现代项目首选 Fetch 或 Axios，兼容性好且功能强大。
    • 老项目或特殊需求（如进度监控）可考虑 XHR。
  4. 团队技术栈：
    • 如果团队熟悉 jQuery，可用 $.ajax。
    • 如果项目需要跨环境（浏览器+Node.js），Axios 是优选。

五、总结与最佳实践

异步编程和请求发送是前端开发的基石。以下是一些实用建议：

  • **优先使用 **async/await：它是现代 JavaScript 的标配，代码简洁、逻辑清晰，适合大多数场景。
  • 选择合适的请求工具：
    • 小型项目或无额外依赖：用 Fetch。
    • 需要丰富功能（如拦截器、取消请求）：用 Axios。
    • 老项目或特殊需求：考虑 XHR 或 jQuery。
  • 错误处理要全面：无论是 Promise 的 catch、async/await 的 try/catch，还是 Axios 的拦截器，确保所有错误都能被捕获和处理。
  • 关注性能：避免过多 await 阻塞，合理使用 Promise.all 并行处理多个异步任务。
  • 实时场景选对协议：WebSocket 适合双向通信，SSE 适合单向推送。
目录