第34章 async 函数

已于 2023-01-09 17:11:43 修改
阅读量173 收藏
点赞数
分类专栏： 异步 文章标签： javascript
于 2021-12-22 16:02:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46151381/article/details/122085647
版权

1 概念

1.1 含义

async 函数是 Generator 函数的语法糖。

const fs = require('fs');
const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};
const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
//等价于
const asyncReadFile = async function () {//星号（*）替换成async
  const f1 = await readFile('/etc/fstab');//yield替换成await
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async函数对 Generator 函数的改进，体现在以下四点。 

（1）内置执行器。 

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。

（2）更好的语义。

async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。这比 Generator 函数的返回值是 Iterator 对象方便多了。

1.2  async 函数的实现原理

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args) {
  // ...
}
 
// 等同于
function fn(args) {
  return spawn(function* () {//spawn函数就是自动执行器
    // ...
  });
}

1.3 与其他异步处理方法的比较

假定某个 DOM 元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。

首先是 Promise 的写法。

function chainAnimationsPromise(elem, animations) {

  // 变量ret用来保存上一个动画的返回值
  let ret = null;

  // 新建一个空的Promise
  let p = Promise.resolve();

  // 使用then方法，添加所有动画
  for(let anim of animations) {
    p = p.then(function(val) {
      ret = val;
      return anim(elem);
    });
  }

  // 返回一个部署了错误捕捉机制的Promise
  return p.catch(function(e) {
    /* 忽略错误，继续执行 */
  }).then(function() {//代码完全都是 Promise 的 API（then、catch等等），操作本身的语义反而不容易看出来
    return ret;
  });

}

接着是 Generator 函数的写法。

function chainAnimationsGenerator(elem, animations) {

  return spawn(function*() {//spawn函数就是自动执行器
    let ret = null;
    try {
      for(let anim of animations) {
        ret = yield anim(elem);//必须保证yield语句后面的表达式，必须返回一个 Promise
      }
    } catch(e) {
      /* 忽略错误，继续执行 */
    }
    return ret;
  });

}

最后是 async 函数的写法。

async function chainAnimationsAsync(elem, animations) {
  let ret = null;
  try {
    for(let anim of animations) {
      ret = await anim(elem);//Generator 写法中的自动执行器，改在语言层面提供
    }
  } catch(e) {
    /* 忽略错误，继续执行 */
  }
  return ret;
}

2 语法

2.1 基本用法

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
asyncPrint('hello world', 50);
//等价于
async function timeout(ms) {//由于async函数返回的是 Promise 对象，可以作为await命令的参数
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
asyncPrint('hello world', 50);

2.2 使用形式

// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }
  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}
const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

2.3  Promise 对象的状态变化

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/<title>([\s\S]+)<\/title>/i)[1];//只有这三个操作全部完成，才会执行then方法
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

2.4 返回 Promise 对象

async函数内部return语句返回的值，会成为then方法回调函数的参数。

async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到。

async function f() {
  return 'hello world';
}
f().then(v => console.log(v))
// "hello world"

async function f() {
  throw new Error('出错了');
}
f().then(
  v => console.log('resolve', v),
  e => console.log('reject', e)
)
//reject Error: 出错了

async function f() {
  await Promise.reject('出错了');//如果在await前面加上return，效果是一样的
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了

3 await 命令

3.1 表达式

  • await命令后面是一个 Promise 对象，返回该对象的结果。
  • 如果不是 Promise 对象，就直接返回对应的值。
  • await命令后面是一个thenable对象（即定义了then方法的对象），那么await会将其等同于 Promise 对象。
async function f() {
  // 等同于
  // return 123;
  return await 123;
}
f().then(v => console.log(v))
// 123

class Sleep {
  constructor(timeout) {
    this.timeout = timeout;
  }
  then(resolve, reject) {//定义了then方法
    const startTime = Date.now();
    setTimeout(
      () => resolve(Date.now() - startTime),
      this.timeout
    );
  }
}
(async () => {
  const sleepTime = await new Sleep(1000);//await命令后面是一个Sleep对象的实例
  console.log(sleepTime);
})();
// 1000

3.2 错误处理 

如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。

  • 有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。
  • 另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。
async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world

async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 出错了
// hello world
async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了

//防止出错的方法，也是将其放在try...catch代码块之中。
async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('出错了');
    });
  } catch(e) {
  }
  return await('hello world');
}

//如果有多个await命令，可以统一放在try...catch结构中。
async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);
    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}

3.3 使用注意点

await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法
async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}

多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

let foo = await getFoo();
let bar = await getBar();

//getFoo和getBar是两个独立的异步操作（即互不依赖）。下面两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

 await命令只能用在async函数之中，如果用在普通函数，就会报错。

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  // 报错
  docs.forEach(function (doc) {
    await db.post(doc);
  });
}

async 函数可以保留运行堆栈。

async function fn(args) {
  // ...
}

// 等同于
function fn(args) {
  return spawn(function* () {//spawn函数就是自动执行器
    // ...
  });
}

4 应用：按顺序完成异步操作

实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组 URL，然后按照读取的顺序输出结果。

//继发
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}

//并发
async function logInOrder(urls) {
  // 并发读取远程URL
  const textPromises = urls.map(async url => {//只有async函数内部是继发执行，外部不受影响
    const response = await fetch(url);
    return response.text();
  });
  // 按次序输出
  for (const textPromise of textPromises) {
    console.log(await textPromise);//for..of循环内部使用了await
  }
}

史学娇
关注
专栏目录
ES6 （二十）async 函数（Generator 函数）、返回值是 Promise（可以直接使用then）、await、错误处理（async的难点）、await并发
qq_43456781的博客
08-08 262
ES6 （二十）async 函数（Generator 函数）、返回值是 Promise（可以直接使用then）、await、错误处理（async的难点）、await并发 文章目录ES6 （二十）async 函数（Generator 函数）、返回值是 Promise（可以直接使用then）、await、错误处理（async的难点）、await并发1. 含义（1）内置执行器。（2）更好的语义。（更直白）（3）更广的适用性。（4）返回值是 Promise。（可以直接使用then）2. 基本用法3. 语法返回 Pr
JavaScript高级程序设计第四版学习记录-第十一章 期约与异步函数
qiao_qiao_happy的博客
03-02 1551
目录11.1 异步编程11.1.1 同步与异步 ECMAScript 6 及之后的几个版本逐步加大了对异步编程机制的支持，提供了令人眼前一亮的新特 性。 ECMAScript 6 新增了正式的 Promise（期约）引用类型，支持优雅地定义和组织异步逻辑。接下来几个版本增加了使用 async 和 await 关键字定义异步函数的机制。 11.1 异步编程 同步行为和异步行为的对立统一是计算机科学的一个基本概念。 特别是在 JavaScript 这种单线程事件循环模型中，同步操作与异步操作更是代码所要依赖的
async和await浅析
weixin_30561425的博客
02-28 144
要理解async和await的用法，首先要了解Task相关知识，这里不做说明，因为这不是本文的重点。 如果你已经对Task很了解，那么如何使用async和await，在此主要总结了以下三点： 只有在async方法里面才能使用await操作符； await操作符是针对Task对象的； 当方法A调用方法B,方法B方法体内又通过await调用方法C时，如果方法C内部有异步操作，则方...
ES6系列之Async/await
十年代码写十年
10-20 187
一、含义 async函数是什么？一句话，它就是Generator函数的语法糖 // 有一个 Generator 函数，依次读取两个文件 const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { ...
async/await 的理解和用法
热门推荐
qq_42941302的博客
10-23 16万+
async/await是什么 async/await 是ES7提出的基于Promise的解决异步的最终方案。 async async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。 // async基础语法 async function fun0(){ console.log(1); return 1; } fun0().then(val=>{ conso
async await用法
一刹那的永恒的专栏
09-27 809
很多同学不明白为什么有了 Promise 还要 async await，还得给函数前加个 async 多麻烦啊，这里我就举个简单例子来说明一下 比如我们有一个注册用户的接口，包含 addMem ，addMemInfo 和 addMemAuth 3个 Promise 方法（异步操作），如果按照普通的写法应该是这样的： let Resigtser = () => { addMem()
第34章 项目1-博客前端：封装库--引入Ajax1
08-03
三、使用封装的Ajax函数 在实际项目中，你可以像下面这样调用封装好的Ajax函数： ```javascript $(document).click(function () { ajax({ method: 'post', url: 'demo.php', data: {'name': 'Lee', 'age': 100}...
第34章 项目1-博客前端：封装库--Ajax注册1
08-03
- `async`：异步标志，设为`true`表示异步请求。 三、Ajax注册流程 1. 用户填写表单信息。 2. 用户点击提交按钮，触发Ajax请求。 3. JavaScript显示加载动画，禁用提交按钮。 4. 数据通过Ajax发送至服务器，服务器...
第34章 项目1-博客前端：封装库--注册验证[10]1
08-03
- 考虑使用第三方验证库，如`validate.js`或`Formik`，以减少重复工作并提升代码质量。 总的来说，注册验证是前端开发中的基础且重要的一环，不仅涉及到用户界面的交互，还直接影响到系统的数据安全。理解和熟练...
async await的用法
最新发布
2³
05-31 357
async/await 是 Js 中的语法糖，基于Promise实现，它不能用于普通的回调函数。它在语法上更像同步代码，使得异步代码的编写更加简洁易懂。
async-await用法
weixin_39889465的博客
01-14 998
await只能用在async函数的上下文中； await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。 实现多个请求并发需要结合async-await和Promis...
async/await用法
宇智波带土
02-02 119
function shaketheDice() { return new Promise((resolve, reject) => { let sino = parseInt(Math.random() * 6 + 1) setTimeout(() => { resolve(sino); }, 6000) }) } function getTime() { return new Promise((.
async/await使用方法
东黧的博客
04-14 2万+
async搭配await是ES7提出的，它的实现是基于Promise。通过同步方式的写法，使得代码更容易阅读。await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。 示例1： async function testSync() { const response = await new Promise(resolve => { ...
ES6——async和await
xun__xing的博客
08-10 753
async和await一、async二、await三、实例四、改造计时器 async 和 await 是 ES2016 新增两个关键字，它们借鉴了 ES2015 中生成器在实际开发中的应用，目的是简化 Promise api 的使用，并非是替代 Promise。 一、async 目的是简化在函数的返回值中对Promise的创建 async 用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象。 async function test(){
async/await 的用法
qq_52654932的博客
04-25 9128
async 是异步的意思，而 await 是等待的意思，await 用于等待一个异步任务执行完成的结果。1.async/await 是一种编写异步代码的新方法（以前是采用回调和 promise）。2. async/await 是建立在 promise 的基础上。3. async/await 像 promise 一样，也是非阻塞的。4. async/await 让异步代码看起来、表现起来更像同步代码。使用场景。
async和await用法
qq_72760247的博客
10-10 720
async和await用法
async/await的基础用法
Kimser
03-24 2845
一、async/await的优点 1）方便级联调用：即调用依次发生的场景； 2）同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯； 3）多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或
JavaScript基础教程：变量、数据类型与常用函数
十四，DOM操作 JavaScript可以操作文档对象模型（DOM），改变网页内容、样式或结构。例如，通过document.getElementById('id')找到元素，然后修改其属性或内容。 十五，BOM（浏览器对象模型） BOM允许JavaScript与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值