async函数解析

转载请注明出处：async函数解析

async函数是基于Generator函数实现的,也就是说是Generator函数的语法糖。在之前的文章有介绍过Generator函数语法和异步应用，如果对其不了解的，可以先看看关于Generator函数的文章，这样学习async函数的难度就不会太大。

传送门: Generator语法解析 Generator函数异步应用

接下来会用一些篇幅说明一下async函数，文末会给出async函数的参考学习文章。

文章目录

  1. 含义
  2. 基本语法
  3. 错误处理
  4. 异步应用

含义

我们知道，调用Generator函数不会立即执行，而是返回遍历器对象。疲于手动执行遍历器对象，因此就有了thunk(thunkify)函数结合run函数来实现自动流程管理。或者，使用co模块来实现自动流程管理，使Generator函数的使用更加方便。

而async函数ES2017标准引入的语法，是Generator函数的语法糖，因此其相对于Generator函数，具有以下基本特点。

内置执行器：使用async函数可以像使用普通函数一样，直接调用即可执行。不用像Generator函数一样使用co模块来实现流程控制。

语义化更强：async关键字表示是一个异步的函数，await表示需要等待执行。相对于yield表达式，语义化更强。

返回值是Promise：async函数返回值是Promise对象，这比Generator函数的返回值是Iterator对象方便多了，可以使用then方法来指定下一步的操作。

基本语法

使用async关键字表明函数是一个async函数，内部使用await关键字表明需要等待异步任务结束后才继续往下执行。

async function as () {
  return 123
}
as().then(data => {
  console.log(data)
})

从上面代码可以看出，调用async函数会返回Promise对象，返回值可以作为then方法成功处理函数的参数值。

如果在async内部如果抛出错误或者出现异常，会被then方法的错误处理函数捕获或者catch方法捕获。

async function as () {
  throw new Error(‘出错拉！‘)
}
as().then(data => {
  console.log(data)
}).catch(err => {
  console.log(err)
})  // Error: xixi, catch方法捕获到错误

另外，async函数内部可以使用await关键字，表示后面的表达式是异步任务。await关键字后边的表达式可以是一个Promise对象，或者简单(复杂)数据类型(Number, String, RegExp, Boolean, Array, Objext)。如果是简单(复杂)数据类型，async函数会隐式调用Promise.resolve方法将其转换为Pormise对象。

function foo () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(‘async‘)
    }, 1000)
  })
}
async function as () {
  const data = await foo()  //foo函数使用setTimeout来模拟异步。
  console.log(data)
}
as()  // async

async function as () {
  return await 123   //如果是其他数据类型，也是如此。
}
as().then(data => {
  console.log(data)
})  // 123

如果await关键字后面的表达式是非Promise、非thenable的普通的值，则会隐式调用Promise.resolve方法将其转换为Promise对象，await关键字会在内部调用then方法将resolve的值返回。

await内部实现大致如下
function await (data) {
  return new Promise((resolve, reject) => {
    resolve(data)
  }).then(data => {
    return data
  })
}

总之，await关键字是then方法的语法糖，会将resolve的值传递出来。

另外，如果在await关键字后的表达式抛出了错误，会使async函数返回的Promise对象从pending状态转变为reject状态，进而被catch方法捕获到错误。

function foo () {
  throw new Error(‘err‘)
}
async function as () {
  await foo()
}
as().then(data => {})
    .catch(err => {
      console.log(err);
    })  // as函数返回的Promise对象从pending状态变为reject状态。

如果某个await关键字后面的表达式抛出错误，async函数的状态就会变为reject，那么函数就会暂停执行，后面的表达式就不会在继续执行。因为Promise函数有一个特点是，一旦状态改变，就不会再变，之后在调用也是保持同一个状态。

function foo () {
  throw new Error(‘err‘)
}
async function as () {
  await foo()
  return Promise.resolve(‘succ‘) // 不会执行到这里，因为Promise对象的状态一旦改变就不会在变了，因此不执行。
}
as().then(data => {})
    .catch(err => {
      console.log(err);
    })

因为async函数默认情况下返回的是Promise对象，因此可以将async函数作为await关键字后面的表达式。async函数调用另一个async函数会更加方便，不会像Generator函数需要使用yield*表达式来调用。

async function foo () {
  return Promise.resolve(‘async‘)
}
async function as () {
  return await foo()   // 调用foo函数会返回Promise对象
}
as().then(data => {
  console.log(data)
})

另外，如果async函数内部没有抛出错误，函数正常执行。那么每一个await关键字后面的异步任务会继发执行。也就是说，一个异步任务结束之后才会执行另外一个异步任务，而不是并发执行。

async function foo () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(10)
    }, 1000)
  })
}
async function bar () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(20)
    }, 2000)
  })
}
async function as () {
  let t1 = Date.now()
  const a = await foo()
  const b = await bar()
  let t2 = Date.now()
  console.log(t2 - t1)  // 有误差，大概3004ms
  return a + b
}
as().then(data => {
  console.log(data)   // 大概3s后输入30
})

如果两个异步任务互不依赖，如果按照上面的代码，两个异步任务继发执行，这样做的缺点是时间浪费了。本来200ms可以完成的两个异步任务，却用了400ms。因此可以让两个互不依赖的异步任务同时触发。有两种方法：

// 方法一：
async function as () {
  const t1 = Date.now()
  const [fo, ba] = [foo(), bar()]
  // 以上两个函数同时执行，并将结果作为await关键字的表达式
  const a = await fo
  const b = await ba
  const t2 = Date.now()
  console.log(t2 - t1)
  return a + b
}

// 写法二：结合使用Promise.all等待所有异步任务完成后才会返回
async function as () {
  const t1 = Date.now()
  const arr = await Promise.all([foo(), bar()])
  const t2 = Date.now()
  console.log(t2 - t1)
  return arr[0] + arr[1]
}
as().then(data => {
  console.log(data)  // 30
})

错误处理

由于async函数内部的异步任务一旦出现错误，那么就等同于async函数返回的Promise对象被reject。因此，为了防止异步任务出现错误，可以使用try...catch来捕获错误，使async函数内部可以正常执行。

async function as () {
  let a = 0
  let b = 0
  try {
    a = await foo()
    b = await bar()
  } catch (e) {}
  return a + b
}
as().then(data => {
  console.log(data) // 30
})

我们知道，try...catch只能用于处理同步的操作，对于异步任务无法捕获到错误。而await关键字能够暂停函数处理，等待异步任务结束之后返回。因此在async函数中使用try...catch结合await关键字捕获异步错误是一个不错的方法。

异步应用

我们来看看使用Promise、Generator、async来实现异步应用的差别。接下来会使用setTimeout来模拟异步。

先来看两个基础函数

function foo (obj) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      let data = {
        height: 180
      }
      data = Object.assign({}, obj, data)
      resolve(data)
    }, 1000)
  })
}
function bar (obj) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      let data = {
        talk () {
          console.log(this.name, this.height);
        }
      }
      data = Object.assign({}, obj, data)
      resolve(data)
    }, 1500)
  })
}

两个函数内部都返回了Promise实例对象，通过Object.assign来合并传递过来的参数。

首先看看纯Promise对象的实现。

function main () {
  return new Promise((resolve, reject) => {
    const data = {
      name: ‘keith‘
    }
    resolve(data)
  })
}
main().then(data => {
  foo(data).then(res => {
    bar(res).then(data => {
      return data.talk()   // keith 180
    })
  })
})

调用过程中就是在不断使用then方法，不够直观，操作本身的语义不太容易看出来。而且有可能出现回调地狱的风险。

接下来看看Generator函数的实现。由于Generator函数的调用需要手动执行，因此写了run函数来实现流程自动控制。

function *gen () {
  const data = {
    name: ‘keith‘
  }
  const fooData = yield foo(data)
  const barData = yield bar(fooData)
  return barData.talk()
}
function run (gen) {
  const g = gen()
  const next = data => {
    let result = g.next(data)
    if (result.done) return result.value
    result.value.then(data => {
      next(data)
    })
  }
  next()
}
run(gen)

使用run函数来实现自动流程控制，Generator函数的好处相对于Promise对象来说，使得异步的过程同步化，同时少了回调地狱的风险。但是缺点是需要使用像run函数或者co模块来实现流程控制。

接下来使用async函数来实现看看。

async function main () {
  const data = {
    name: ‘keith‘
  }
  const fooData = await foo(data)
  const barData = await bar(fooData)
  return barData
}
main().then(data => {
  data.talk()
})

从上面代码中，可以看出，使用async函数的代码量最少，而且使得异步过程同步化，更进一步，async函数内置执行器。调用的方法更加简洁。


ok，差不多就这样了，稍微总结一下。

  1. async函数是基于Generator函数实现的，是Generator函数的语法糖。其内置执行器，调用后返回Promise对象，因此可以像普通韩式一样使用。
  2. async函数内部抛出错误或者await关键字后面的表达式抛出错误，会使async函数返回的Promise对象从pending状态变为reject状态，从而可以被catch方法捕获错误。而且，Promise对象的状态一旦改变就不会再变，之后的异步任务就不会执行了。
  3. await关键字后面的表达式可以是Promise对象，也可以是其他数据类型。如果是其他数据类型，则会通过Promise.resolve将其转换为Promise对象
  4. async函数内部如果有多个await关键字，其后的异步任务会继发执行。如果每一个异步任务不相互依赖，则可以使用Promise.all让其并发执行，这样可以在同样的时间里完成多个异步任务，提高函数执行效率。
  5. 对于async内部抛出的错误，可以使用try...catch来捕获异常。虽然try...catch只能用于捕获同步任务，但是await关键字可以使得异步任务同步化,因此可以结合try...catch和await关键字捕获异步任务。

参考资料：

  1. async 函数
  2. async 函数的含义和用法

原文地址：https://www.cnblogs.com/unclekeith/p/8372126.html

时间： 2024-10-06 23:59:41

async函数解析的相关文章

js-ES6学习笔记-async函数（3）

1.await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中. 2.多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发. // 写法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 写法二 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin

ngx_http_process_request_headers函数解析

ngx_http_process_request_headers函数被ngx_http_process_request_line函数调用,将请求头逐个放到r->headers_in.headers结构体中.由于不确定请求中一共有多少个header,所以这个函数主要功能也是在for(;;){}循环中完成,一下所有的代码都是在上述循环内部的.主要代码和解析如下: 判断是否超时,如果超时,报错并结束请求.    if (rev->timedout) {        ngx_log_error(NG

iOS 基础函数解析 - Foundation Functions Reference

Foundation Functions Reference Framework Foundation/Foundation.h Declared in NSBundle.h NSByteOrder.h NSDecimal.h NSException.h NSObjCRuntime.h NSObject.h NSPathUtilities.h NSRange.h NSZone.h Overview This chapter describes the functions and function

thread.join函数，java多线程中的join函数解析

join函数的作用,是让当前线程等待,直到调用join()的 线程结束或者等到一段时间,我们来看以下代码 1 package mian; 2 3 4 public class simpleplela { 5 static void threadMessage(String message) { 6 String threadName = 7 Thread.currentThread().getName(); 8 9 System.out.println(threadName+" "+m

js-ES6学习笔记-async函数

1.async 函数是 Generator 函数的语法糖.前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) reject(error); resolve(dat

socket使用TCP协议时，send、recv函数解析以及TCP连接关闭的问题

Tcp协议本身是可靠的,并不等于应用程序用tcp发送数据就一定是可靠的.不管是否阻塞,send发送的大小,并不代表对端recv到多少的数据. 在阻塞模式下, send函数的过程是将应用程序请求发送的数据拷贝到发送缓存中发送并得到确认后再返回.但由于发送缓存的存在,表现为:如果发送缓存大小比请求发送的大小要大,那么send函数立即返回,同时向网络中发送数据;否则,send向网络发送缓存中不能容纳的那部分数据,并等待对端确认后再返回(接收端只要将数据收到接收缓存中,就会确认,并不一定要等待应用程序调

BulkLoop例程の初始化函数and重复调度函数の解析

//----------------------------------------------------------------------------- // File: bulkloop.c // Contents: Hooks required to implement USB peripheral function. // // $Archive: /USB/Examples/FX2LP/bulkloop/bulkloop.c $ // $Date: 3/23/05 2:55p $

C++虚函数解析（转载）

虚函数详解第一篇:对象内存模型浅析 C++中的虚函数的内部实现机制到底是怎样的呢? 鉴于涉及到的内容有点多,我将分三篇文章来介绍. 第一篇:对象内存模型浅析,这里我将对对象的内存模型进行简单的实验和总结. 第二篇:继承对象的构造和析构浅析,这里我将对存在继承关系的对象的构造和析构进行简单的实验和总结. 第三篇:虚函数的内部机制浅析,这里我将对虚函数内部的实现机制进行实验总结. 我使用的编译器是VS2008,有不足或者不准确的地方,欢迎大家拍砖(我个人非常迫切的希望得到大家的指正),我会及时修正相