仅“2k”字就能理解的async/await原理，摸个鱼的时间搞定它

梁木由的前端新气象 2023-03-28 原文

前言

上篇文章5K字由浅入深聊聊Promise实现原理，中讲述了Promise内部的实现原理。今天来聊聊async与await，那么async与await到底是什么呢。都说是语法糖，就来深入理解下async/await吧

来看下MDN的概念
async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字
await 操作符用于等待一个 Promise 兑现并获取它兑现之后的值。它只能在异步函数或者模块顶层中使用。
async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。

async

async在字面上的意思呢，是异步的概念，根据MDN的概念呢，说明async声明的是一个异步构造函数，来看如下示例

const fn1 = async function fn(){
  return 1
}
console.log(fn1())
// Promise {<fulfilled>: 1}

根据上述示例内容，表述async声明了一个异步构造函数，并且调用了该函数，返回结果是一个Promise对象。

那问题来了，在看上述代码异步函数中return的是1，结果却是一个Promise对象，不急，答案来了。

如果在函数中return的不是一个promise,那么将等同于使用Promise.resolve(x)给包装起来

function fn() {
  return Promise.resolve(1);
}

将常规函数转换成Promise，返回值也是一个Promise对象

那这么看async与Promise有什么区别呢，看着是没什么区别，先不着急，再接着看下await

await

await字面意思呢等待等候的意思，那到底是在等什么呢，等promise对象吗？

const fn1 = function fn() {
  return Promise.resolve(1);
};
async function result() {
  const r1 = await fn1();
  console.log(r1); // 1
}
result();

还可以等其它值吗？

const fn1 = function fn() {
  return Promise.resolve(1);
};
const fn2 = function test() {
  return "test";
};
async function result() {
  const r1 = await fn1();
  const r2 = await fn2();
  console.log(r1, r2); // 1 'test'
}
result();

结果呢，不是promise对象的值也等到了。

await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果。并且返回处理结果
只能在async函数内部使用

async/await作用

根据上述内容呢，了解到async与await如何使用以及返回结果，那它们的作用体现到哪了呢？

先看下列有一个业务，业务内容呢需要重复请求操作，但是接口参数呢都需要在上一个请求结果中获取，先看下例子

function getFetch(type) {
  setTimeout(() => {
    let result = type + 1;
    return result;
  }, 1000);
}
getFetch(a).then((b) => {
  getFetch(b).then((c) => {
    getFetch(c).then((data) => {
      return data;
    });
  });
});

多重的异步操这是不是传说中的回调地狱呢，那怎么解决呢

用promise方法来解决

function getFetch(type) {
  return new Promise((resolve, reject) => {
    let result = type + 1;
    resolve(result);
  });
}

getFetch(0)
  .then((res) => {
    console.log(res);
    return getFetch(res);
  })
  .then((res) => {
    console.log(res);
    return getFetch(res);
  })
  .then((res) => {
    console.log(res);
  });

来用async/await 来解决

function getFetch(type) {
  let result = type + 1;
  return result;
}

async function getResult(a) {
  const n1 = await getFetch(a);
  const n2 = await getFetch(n1);
  const n3 = await getFetch(n2);
  console.log(n1, n2, n3);
}
getResult(0);

输出结果呢与Promise解决方案是一致的，但是代码看起来简洁明了

用同步方式，执行异步操作达到排队效果，解决回调地狱

Generator

async/await为什么说是语法糖呢，是谁的语法糖呢？

在阮一峰的ES6入门教程中有说到：

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。
异步操作需要暂停的地方，都用 yield 语句注明
调用 Generator 函数，返回的是指针对象(这是它和普通函数的不同之处),。调用指针对象的 next 方法，会移动内部指针。
next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

了解generator用法

function* Generator() {
  yield "1";
  yield Promise.resolve(2);
  return "3";
}
var gen = Generator();
console.log(gen); //返回一个指针对象 Generator {<suspended>}

调用next方法

let res1 = gen.next();
console.log(res1); // 返回当前阶段的值 { value: '1', done: false }

let res2 = gen.next();
console.log(res2); // 返回当前阶段的值 { value: Promise { 2 }, done: false }

res2.value.then((res) => {
  console.log(res); // 2
});

let res3 = gen.next();
console.log(res3); // { value: '3', done: true }

let res4 = gen.next();
console.log(res4); // { value: undefined, done: true }

实现async/await

async/await的理解

async 函数执行结果返回的是一个Promise
async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成await
async/await 就是 Generator 的语法糖，其核心逻辑是迭代执行next函数

先来初步实现一个执行结果返回Promise的函数

function muYouAsync(){
    // 返回一个函数
    return function(){
        // 返回一个promise
        return new Promise((resolve, reject) => {

        })
    }
}

并且呢muYouAsync接受一个Generator函数作为参数的，那我们再来完善一下

function* gen() {

}
//接受一个Generator函数作为参数
function muYouAsync(gen){
    // 返回一个函数
    return function(){
        // 返回一个promise
        return new Promise((resolve, reject) => {

        })
    }
}

我们来测试下看下执行结果是否返回Promise

const asyncGen = muYouAsync(gen)
console.log(asyncGen()) //Promise {<pending>}

看输出结果的话与执行结果返回Promise是一致的

至此呢第一部分函数执行返回结果已完成，那我们来完善一下Generator函数

const getFetch = (nums) =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(nums + 1);
    }, 1000);
  });

function* gen() {
  let res1 = yield getFetch(1);
  let res2 = yield getFetch(res1);
  let res3 = yield getFetch(res2);
  return res3;
}

Generator函数也编写完成了，在下一步我们要想，怎么让它执行起来了呢，那就需要用到Generator核心逻辑迭代执行next函数，注意点是需要将next迭代执行

//接受一个Generator函数作为参数
function muYouAsync(gen) {
  // 返回一个函数
  return function () {
    // 返回一个promise
    return new Promise((resolve, reject) => {
      // 执行Generator函数
      let g = gen();
      const next = (context) => {
        const { done, value } = g.next(context);
        if (done) {
          // 这时候说明已经是完成了，需要返回结果
          resolve(value);
        } else {
          // 继续执行next函数,传入执行结果
          return Promise.resolve(value).then(val => next(val))
        }
      };
      next();
    });
  };
}

整体的逻辑已经全都补充好了，那我们还需要在完善下最后一步，async返回的是promise，所以我们可以用try catch 来捕获

完整代码

//接受一个Generator函数作为参数
function muYouAsync(gen) {
  // 返回一个函数
  return function () {
    // 返回一个promise
    return new Promise((resolve, reject) => {
      // 执行Generator函数
      let g = gen();
      const next = (context) => {
        let res
        try {
            res = g.next(context);
        } catch (error) {
            reject(error)
        }
        if (res.done) {
          // 这时候说明已经是完成了，需要返回结果
          resolve(res.value);
        } else {
          // 继续执行next函数,传入执行结果
          return Promise.resolve(res.value).then(val => next(val), err => next(err))
        }
      };
      next();
    });
  };
}

那我们最后来测试一下

const getFetch = (nums) =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(nums + 1);
    }, 1000);
  });

function* gen() {
  let res1 = yield getFetch(1);
  let res2 = yield getFetch(res1);
  let res3 = yield getFetch(res2);
  return res3;
}

const asyncGen = muYouAsync(gen);
asyncGen().then(res => {console.log(res)}); // 4

结语

今年想法呢，是输出一些文章，总不能干了几年活了，还是碌碌无为，躺平过日子。年前那几天也刷了不少文章，看到了很多平台的前端打工人，都很卷的样子，那我今年也就卷一下子吧，腰断了就不卷了。

如果感觉此文稍微有些帮助的话，请不吝点个赞???，支持一下

我呢也是一个前端小学生希望与大家交个朋友，一起来我的摸鱼群->摸鱼大家庭

ldquo async section br code 前端 javascript await 异步编程JavaScript 前端开发yyds干货盘点

有关仅“2k”字就能理解的async/await原理，摸个鱼的时间搞定它的更多相关文章

ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2
我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。最佳答案我不太明白你的问题。我假设您想检查
ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2
这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build
ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
CAN协议的学习与理解 - 2
最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总
TimeSformer：抛弃CNN的Transformer视频理解框架 - 2
Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图
sql - 查询忽略时间戳日期的时间范围 - 2
我正在尝试查询我的Rails数据库(Postgres)中的购买表，我想查询时间范围。例如，我想知道在所有日期的下午2点到3点之间进行了多少次购买。此表中有一个created_at列，但我不知道如何在不搜索特定日期的情况下完成此操作。我试过:Purchases.where("created_atBETWEEN?and?",Time.now-1.hour,Time.now)但这最终只会搜索今天与那些时间的日期。最佳答案您需要使用PostgreSQL'sdate_part/extractfunction从created_at中提取小时
ruby - 易于初学者理解的 Ruby 库 - 2
关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭3年前。Improvethisquestion我正处于学习Ruby的阶段，我想查看一些小型库的源代码以了解它们是如何构建的。我不知道什么是小型图书馆，但希望SO能推荐一些易于理解的图书馆来学习。因此，如果有人知道一两个非常小的库，这是新手Rubyists学习的好例子，请推荐!我想使用Manveru'sInnatelib，因为它试图保持在2000LOC以下，但我还不熟悉其中经常使用的Ruby速记。也许大约100-5
ruby - 在没有基准或时间的情况下用 Ruby 测量用户时间或系统时间 - 2
因为我现在正在做一些时间测量，我想知道是否可以在不使用Benchmark类或命令行实用程序time的情况下测量用户时间或系统时间。使用Time类只显示挂钟时间，而不显示系统和用户时间，但是我正在寻找具有相同灵active的解决方案，例如time=TimeUtility.now#somecodeuser,system,real=TimeUtility.now-time原因是我有点不喜欢Benchmark，因为它不能只返回数字(编辑:我错了-它可以。请参阅下面的答案。)。当然，我可以解析输出，但感觉不对。*NIX系统的time实用程序也应该可以解决我的问题，但我想知道是否已经在Ruby中实
ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2
由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A
ruby - 以毫秒为单位获取当前系统时间 - 2
在Ruby中，以毫秒为单位获取自纪元(1970)以来的当前系统时间的正确方法是什么？我试过了Time.now.to_i，好像不是我想要的结果。我需要结果显示毫秒并且使用long类型，而不是float或double。最佳答案 (Time.now.to_f*1000).to_iTime.now.to_f显示包含十进制数字的时间。要获得毫秒数，只需将时间乘以1000。关于ruby-以毫秒为单位获取当前系统时间，我们在StackOverflow上找到一个类似的问题：