详解：JS异步解决方案之回调函数，及其弊端

news2024/9/28 1:22:51

「异步编程」是前端工程师日常开发中经常会用到的技术，异步的实现有好几种方式，各有利弊，本篇先讲通过回调来实现来异步。

一、同步和异步

同步编程和异步编程是两种不同的编程方式。

同步编程是指按照代码的顺序执行，每一行代码执行完毕后再执行下一行。在同步编程中，如果遇到耗时的操作，例如网络请求或者文件读取，程序会一直等待该操作完成后再继续执行后续的代码。

异步编程是指不按照代码的顺序执行，而是通过回调函数、Promise、async/await等方式，将耗时的操作放在后台执行，继续执行后续的代码。当耗时的操作完成后，会通过回调函数或者Promise的resolve方法将结果返回，然后执行相应的操作。

同步编程的优点

是代码简单、直观，易于理解和调试。

缺点是当遇到耗时的操作时，程序会一直等待，导致页面卡顿或者阻塞其他操作。

异步编程的优点

是可以提高程序的性能和响应速度，避免页面卡顿和阻塞其他操作。

缺点是代码复杂度较高，需要处理回调函数嵌套、错误处理等问题，可读性较差。

同步编程适用于简单的操作和代码执行顺序要求严格的场景，而异步编程适用于需要处理耗时操作、提高性能和响应速度的场景。在实际开发中，根据具体的需求和场景选择合适的编程方式。

二、js中的异步场景

JavaScript中异步编程有许多应用场景，下面列举了一些常见的应用场景：

Ajax请求：通过异步方式向服务器发送请求并获取响应数据，避免页面刷新和阻塞其他操作。
定时器：使用setTimeout或setInterval函数设置定时器，可以在指定的时间间隔后执行相应的操作。
文件读取和写入：通过异步方式读取和写入文件，可以在文件操作进行的同时执行其他操作。
事件处理：处理DOM事件、用户交互事件等，例如点击按钮、滚动页面等。
Promise：使用Promise对象处理异步操作，可以更加优雅地处理异步代码，避免回调函数嵌套的问题。
异步函数：使用async/await关键字定义异步函数，可以让异步代码看起来像同步代码，提高代码的可读性和可维护性。
Web Workers：通过Web Workers在后台线程中执行耗时操作，避免阻塞主线程，提高页面的响应性能。
WebSocket：使用WebSocket实现双向通信，可以在客户端和服务器之间实时传输数据。

这些只是一些常见的应用场景，实际上异步编程可以应用于任何需要处理耗时操作或者需要提高性能和响应速度的场景。异步编程在JavaScript中非常重要，能够提高代码的效率和用户体验。

三、回调函数如何处理js中的异步请求

回调函数是处理JavaScript中异步请求的一种常见方式。下面是一个使用回调函数处理异步请求的代码示例：

function getData(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      callback(data); // 将获取到的数据传递给回调函数处理
    }
  };
  xhr.send();
}
// 调用getData函数，传入URL和回调函数
getData('https://jsonplaceholder.typicode.com/users', function(data) {
  console.log(data); // 在回调函数中处理获取到的数据
});

在上面的代码中，getData函数接受一个URL和一个回调函数作为参数。当Ajax请求完成后，如果返回状态码为200，就会调用回调函数并传递响应的文本数据作为参数。

在调用getData函数时，我们传入了一个回调函数，这个回调函数会在数据请求完成后被调用，并处理获取到的数据。使用回调函数的优点是可以避免阻塞代码的执行，提高代码的效率。但是，如果回调函数嵌套过多，会导致代码难以维护和阅读。因此，需要使用其他的异步解决方案，例如Promise和async/await。