前端宝典二十一：前端异步编程规范手写Promise、async、await

桃子叔叔

已于 2024-09-12 15:40:42 修改

阅读量1.1k

点赞数 24

分类专栏：前端深度解析系列大厂进阶 es6 文章标签：前端 es6

于 2024-08-30 11:02:07 首次发布

本文链接：https://blog.youkuaiyun.com/franktaoge/article/details/141672508

版权

本文主要探讨前端异步编程的处理方式、处理场景，并且手写Promise的全家桶，介绍async、await方法使用

一、异步处理方式有：

1. 回调函数

function fetchDate(callback) {
   
    setTimeout(() => {
   
        const date = new Date();
        callback(date);
    }, 1000);   
}
fetchDate((function(date) {
   
    console.log
}));

2. promise

const fetchPromise = (callback) => {
   
    return new Promise((resolve, reject) => {
   
        resolve(callback);
        reject('Error');
    }).then((date) => {
   
        console.log(date);
    }).catch((err) => {
   
        console.log(err);
    })
}

3. async、await

async function name(params) {
   
    try {
   
        const data1 = await fecth('https://jsonplaceholder.typicode.com/posts');
        const data2 = await fecth('https://jsonplaceholder.typicode.com/users');
        const data3 = await fecth('https://jsonplaceholder.typicode.com/comments');
    } catch (error) {
   
        console.log(error);
    }
}

4. 发布订阅模式

这里手写一个EventEmitter使用发布订阅模式实现异步操作：

class EventEmitter {
   
  constructor() {
   
    this.events = {
   };
  }

  on(eventName, callback) {
   
    if (!this.events[eventName]) {
   
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName,...args) {
   
    if (this.events[eventName]) {
   
      this.events[eventName].forEach(callback => callback(...args));
    }
  }

  off(eventName, callback) {
   
    if (this.events[eventName]) {
   
      this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);
    }
  }
}

const eventEmitter = new EventEmitter();

function asyncOperation() {
   
  return new Promise((resolve, reject) => {
   
    setTimeout(() => {
   
      resolve('Async operation completed!');
    }, 2000);
  });
}

async function performAsyncWithPubSub() {
   
  eventEmitter.on('operationCompleted', result => {
   
    console.log(result);
  });

  const result = await asyncOperation();
  eventEmitter.emit('operationCompleted', result);
}

performAsyncWithPubSub();

在这个例子中，我们创建了一个EventEmitter类来实现发布订阅模式。asyncOperation函数模拟一个异步操作，在两秒后返回一个结果。performAsyncWithPubSub函数使用发布订阅模式，在异步操作完成后发布一个事件，然后订阅这个事件的回调函数会被执行并打印出结果。

5. generator函数

6. promise all

const fetchRes = (res) => {
   
    return new Promise((resolve, reject) => {
   
        resolve(res);
    }).then((data) => {
   
        return data
    }).catch((error) => {
   
        console.log(error);
    })
}
const fetchAll = () => {
   
    return Promise.all([fetchRes('res1'), fetchRes('res2')]).then((data) => {
   
        console.log(data);
    }).catch((error) => {
   
        console.log(error);
    }).finally(() => {
   
        console.log('done');
    })    
}

7. 预加载资源

import {
    Image } from 'react-native';

// 预加载图像
Image.prefetch('https://example.com/image.jpg')
 .then(() => console.log('Image preloaded successfully'))
 .catch(error => console.error('Error preloading image:', error));

8. addEvent Listener事件监听

二、异步处理场景

网络请求
定时任务
事件绑定
大量数据处理web worker

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <script>
    // 创建 Web Worker
    const worker = new Worker('worker.js');

    // 生成大量数据
    const largeData = Array.from({
      length: 1000000 }, (_,

最低0.47元/天解锁文章