ES6 之 async函数

1.简介

ES2017引入了async函数,使得异步操作变得更加方便。

async函数的返回值是Promise对象,因此可以使用.then()方法指定下一步操作。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体后面的语句。

示例:

function timeout(ms){
  return new Promise((reslove)=>{
    setTimeout(reslove,ms);
  });
}

async function asyncPrint(value,ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint(‘hello world‘,2000);

以上代码指定2s后输出"hello world"

由于async 函数返回的是Promise对象,可以作为await命令的参数,上面的例子也可以写成:

async function timeout(ms) {
  await new Promise((resolve)=>{
    setTimeout(resolve,2000);
  })
}

async function asyncPrint(value,ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint(‘hello world‘,2000)

2.async的使用方式:

(1)函数声明:

async function foo(){...}

(2)函数表达式

const foo = async function(){...}

(3)对象的方法

let obj = { async foo() {} };
obj.foo().then(...)

(4)class的方法

class Storage{
    constructor (){    this.catchePromise = caches.open("avatars");    }

  async getAvatar(name) {    const cache = await this.cachePromise;    return cache.match("/avatars/${name}.jpg");  }
}

const storage = new Storage();storage.getAvatar("‘jack").then(...

3.语法

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

async function f(){
  return "hello";
}

f().then(v => console.log(v));

上面代码中,f函数返回的字符串被then接到,再进行操作。

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

async function f(){
  throw new Error("出错了");
}

f().then(
  v => console.log(v),
  e => console.log(e)
);

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

4.await命令

正常情况下,await命令后面是一个Promise对象,如果不是,会被转成一个立即resolve的Promise对象。

async function f(){
  return await 123;
}

f().then(v => console.log(v));

  上面的代码中,await命令的参数是数值123,它被转成Promise对象并立即resolve。

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

async function f(){
  await Promise.reject("出错了");
}

f()
.then(v => console.log(v))
.catch(e => console.log(e));  // 出错了

上面的代码中,await语句前面没有return,但是reject方法的参数依然传入了catch方法的回调函数。这里如果在await前面加上return,效果是一样的。

值得注意的是:只要一个await语句后面的Promise变为reject,那么整个async函数都会中断执行。

async function f(){
  await Promise.reject("出错了");
  await Promise.resolve("hello world");    // 不会执行
}

f()
.then(v => console.log(v))
.catch(e => console.log(e));

如果希望一个异步操作执行失败也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

async function f(){
  try{
    await Promise.reject("出错了");
  }catch{

  }
  return await Promise.resolve("hello world");
}

f().then(v => console.log(v));

或者:也可以在await后面的Promise对象后变价一个catch()方法,处理前面可能出现的错误。

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

5.错误处理

如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject。

处理出错的方法上面已经提出两种。

如果有多个await命令,则可以统一放在try ... catch结构中。

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

原文地址:https://www.cnblogs.com/codexlx/p/12589451.html

时间: 2024-10-10 03:49:54

ES6 之 async函数的相关文章

深入浅出ES6教程『async函数』

大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Symbol & generator的用法,下面我们一起来继续学习async函数: async [?'z??k]:这个单词看起来很怪异,它的原型是asynchrony,意为异步,一般单词按理说都能把音准读个大概,这个就... 与其同时呢,也有的人看了这个词想到了放在script标签里的异步脚本,但是此async非彼async,这个async是ES2017出来的,也是用来处理异步的,和ES6中的promise类似,nodeJ

ES6学习笔记(四)—— async 函数

await 是 async wait 的简写, 是 generator 函数的语法糖. async 函数的特点: async 声明一个方法是异步的,await 则等待这个异步方法执行的完成 asyncReadFile = async function () { var f1 = await readFile('/etc/fstab') var f2 = await readFile('/etc/shells') console.log(f1.toString()) console.log(f2.

es6的箭头函数转换为普通函数,以及将await/async函数转为普通函数

箭头函数转为普通函数: 1. 安装babel-preset-es2015  npm install babel-preset-es2015 --save-dev 2.在.babelrc文件夹中:  "presets": ["es2015"] await/async函数转为普通函数: 1. 安装babel-preset-stage-2 npm install babel-preset-stage-2  --save-dev 2.在.babelrc 文件中: "

ES6中的async函数

一.概述 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) return reject(error); re

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(data)

ES6的新特性(18)——async 函数

async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取两个文件. const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName,

ES6基础知识(async 函数)

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); });

阮一峰老师的ES6入门:async 函数

async 函数 1. 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取两个文件. const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileNam

初识async函数

为什么会出现async函数 首先从大的方面来说,出现async函数时为了解决JS编程中的异步操作,再往具体说就是为了对以往异步编程方法的一种改进,也有人说仅仅只是Generator 函数的语法糖,这个我暂时还没理解到那个程度,因为我对Generator还是一知半解,等理解透一些了会专门写篇文章记录一下的.回到async函数,它算是阶段性的解决了异步编程的问题,也就是说让我们无限接近了异步编程的最高境界,就是不用关心它是不是异步,一切都是同步编程的写法,那样可读性就很强了. 什么是async函数