首页 > web前端 > js教程 > 正文

Promises/A+ 和异步等待 - JavaScript 挑战

花韻仙語
发布: 2024-11-04 15:28:23
转载
584人浏览过

promises/a+ 和异步等待 - javascript 挑战

您可以在 github 仓库中找到这篇文章中的所有代码。


异步编程 promises/a+ & async 等待相关挑战


使用 promise.finally() 实现 promises/a+

class mypromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onfulfilledcallbacks = [];
    this.onrejectedcallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onfulfilledcallbacks.foreach((callbackfn) => callbackfn(this.value));
      }
    } 

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onrejectedcallbacks.foreach((callbackfn) => callbackfn(this.reason));
      }
    }

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  handlepromiseresult(result, resolve, reject) {
    if (result instanceof mypromise) {
      result.then(resolve, reject);
    } else {
      resolve(result);
    }
  }

  then(onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function'
      ? onfulfilled
      : (value) => value;
    onrejected = typeof onrejected === 'function'
      ? onrejected
      : (reason) => { throw reason; };

    // return a promise
    return new mypromise((resolve, reject) => {
      const fulfilledhandler = () => {
        queuemicrotask(() => {
          try {
            const result = onfulfilled(this.value);
            this.handlepromiseresult(result, resolve, reject);
          } catch (err) {
            reject(err);
          }
        });
      };

      const rejectedhandler = () => {
        queuemicrotask(() => {
          try {
            const result = onrejected(this.reason);
            this.handlepromiseresult(result, resolve, reject);
          } catch (err) {
            reject(err);
          }
        });
      };

      if (this.state === 'fulfilled') {
        fulfilledhandler();
      } else if (this.state === 'rejected') {
        rejectedhandler();
      } else {
        this.onfulfilledcallbacks.push(fulfilledhandler);
        this.onrejectedcallbacks.push(rejectedhandler);
      }
    });
  }

  catch(onrejected) {
    return this.then(null, onrejected);
  }

  finally(onfinally) {
    if (typeof onfinally !== 'function') {
      return this.then();
    }

    return this.then(
      (value) => mypromise.resolve((onfinally()).then(() => value)),
      (reason) => mypromise.resolve(onfinally()).then(() => { throw reason })
    );
  }

  static resolve(value) {
    return new mypromise((resolve) => resolve(value));
  }

  static reject(reason) {
    return new mypromise((_, reject) => reject(reason));
  }
}

// usage example
const promise = mypromise.resolve(1);
promise.then((value) => {
  console.log(value);
})
.then(() => {
  throw new error('error');
})
.catch((err) => {
  console.log(`error catched: ${err}`);
});
登录后复制

使用生成器实现异步等待

function asyncGenerator(generatorFunc) {
  return function (...args) {
    const generator = generatorFunc(...args);

    return new Promise((resolve, reject) => {
      function handle(iteratorResult) {
        if (iteratorResult.done) {
          resolve(iteratorResult.value);
          return;
        }

        Promise.resolve(iteratorResult.value)
          .then(
            (value) => handle(generator.next(value)),
            (err) => handle(generator.throw(err)),
          );
      }

      try {
        handle(generator.next());
      } catch (err) {
        reject(err);
      }
    });
  }
}

// Usage example
function* fetchData() {
  const data1 = yield fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json());
  console.log(data1);

  const data2 = yield fetch('https://jsonplaceholder.typicode.com/posts/2').then(res => res.json());
  console.log(data2);
}

// Create an async version of the generator function
const asyncFetchData = asyncGenerator(fetchData);

// Call the async function
asyncFetchData()
  .then(() => console.log('All data fetched!'))
  .catch(err => console.error('Error:', err));
登录后复制

参考

  • 67。创建你自己的 promise - bfe.dev
  • 123。实现 promise.prototype.finally() - bfe.dev
  • 承诺 - mdn
  • 异步函数 - mdn
  • 承诺/a+

以上就是Promises/A+ 和异步等待 - JavaScript 挑战的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号