前端面试题12（js异步方法）

在JavaScript中，异步编程是处理延迟操作（如网络请求、定时器等）的关键方式，它允许代码在等待某些操作完成时继续执行，提高了应用的响应性和用户体验。

1. 回调函数（Callback）
   回调是最原始的异步处理方式。一个函数作为参数传递给另一个函数，并在操作完成后被调用。

   function fetchData(callback) {
     setTimeout(() => {
       const data = '模拟数据';
       callback(data);
     }, 1000);
   }
   
   fetchData(data => {
     console.log('获取到的数据:', data);
   });
   

2. Promise
   Promise是ES6引入的用于解决回调地狱问题的异步编程模式，支持链式调用和错误处理。

   function fetchData() {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         const data = '模拟数据';
         resolve(data);
       }, 1000);
     });
   }
   
   fetchData()
     .then(data => console.log('获取到的数据:', data))
     .catch(error => console.error('发生错误:', error));
   

3. async/await
   async/await也是ES6引入的，基于Promise之上，提供了更简洁的异步编程风格。

   async function fetchData() {
     return new Promise(resolve => {
       setTimeout(() => {
         const data = '模拟数据';
         resolve(data);
       }, 1000);
     });
   }
   
   async function main() {
     try {
       const data = await fetchData();
       console.log('获取到的数据:', data);
     } catch (error) {
       console.error('发生错误:', error);
     }
   }
   
   main();
   

4. Generator函数
   Generator是ES6引入的，可以暂停和恢复函数执行，常与Promise结合使用实现异步流程控制。

   function* fetchData() {
     yield new Promise(resolve => {
       setTimeout(() => resolve('模拟数据'), 1000);
     });
   }
   
   function run(gen) {
     const g = gen();
     g.next().value.then(data => {
       console.log('获取到的数据:', data);
       g.next();
     });
   }
   
   run(fetchData);
   

5. Observables（RxJS库）
   Observables是RxJS等库中使用的高级异步编程模型，适用于复杂的异步和事件处理场景。

   import { from, of } from 'rxjs';
   import { delay } from 'rxjs/operators';
   
   const fetchData$ = of('模拟数据').pipe(delay(1000));
   
   fetchData$.subscribe(
     data => console.log('获取到的数据:', data),
     error => console.error('发生错误:', error)
   );
   

6. setTimeout & setInterval
   这两个是基本的定时器函数，常用于简单的异步延时或循环执行任务。

   setTimeout(() => {
     console.log('延时后执行');
   }, 1000);
   
   let count = 0;
   const intervalId = setInterval(() => {
     console.log(`每隔一秒执行，当前计数: ${count++}`);
     if (count >= 5) clearInterval(intervalId); // 停止定时器
   }, 1000);
   

7. requestAnimationFrame
   用于实现动画的流畅更新，适合于需要与浏览器渲染循环同步的场景。

   let start = null;
   
   function step(timestamp) {
     if (!start) start = timestamp;
     const progress = timestamp - start;
     console.log(`已过去的时间: ${progress}ms`);
     if (progress < 1000) {
       requestAnimationFrame(step);
     }
   }
   
   requestAnimationFrame(step);