本文介绍的是关于es6中Async函数的相关内容，非常出来供大家参考学习，需要的朋友们下面来看看详细的介绍：

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) reject(error);
  resolve(data);
 });
 });
};
var gen = function* () {
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

写成async函数，就是下面这样:

var asyncReadFile = async function () {
 var f1 = await readFile('/etc/fstab');
 var f2 = await readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

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

1）内置执行器

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

var result = asyncReadFile();

上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

2）更好的语义

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

3）更广的适用性

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

4）返回值是 Promise

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

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

一、基本用法

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

function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

上面代码指定5000毫秒以后，输出hello world。

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

async function timeout(ms) {
 await new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

async 函数多种使用形式

// 函数声明
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('hzzly').then(…);
// 箭头函数
const foo = async () => {};

二、语法

async函数的语法规则总体上比较简单，难点是错误处理机制。

返回 Promise 对象

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

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

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];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

上面代码中，函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。

三、使用注意点

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命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

//异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。
let foo = await getFoo();
let bar = await 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函数的使用例子可以点击查看这篇文章：https://www./article/113475.htm

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# es6  # async函数  # async  # class  # JS基于ES6新特性async await进行异步处理操作示例  # 详解ES6之async+await 同步/异步方案  # ES6新特性八：async函数用法实例详解  # es6学习笔记之Async函数的使用示例  # ES6的异步操作之promise用法和async函数的具体使用  # ES6中异步对象Promise用法详解  # ES6的Fetch异步请求的实现方法  # 详解ES6 系列之异步处理实战  # 详解ES6中的三种异步解决方案  # ES6 async、await的基本使用方法示例  # 才会  # 的是  # 就会  # 回调  # 多个  # 返回值  # 执行器  # 这篇文章  # 用在  # 也就是说  # 继发  # 放在  # 相关内容  # 可以用  # 它是  # 朋友们  # 不像  # 不存在  # 点击查看  # 来看看 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Laravel如何使用Blade组件和插槽？（Component代码示例）  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  如何在云主机上快速搭建网站？  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  Laravel如何实现API版本控制_Laravel版本化API设计方案  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  javascript基本数据类型及类型检测常用方法小结  Android Socket接口实现即时通讯实例代码  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  Laravel如何使用Eloquent进行子查询  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  用yum安装MySQLdb模块的步骤方法  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  深圳网站制作的公司有哪些,dido官方网站？  Laravel如何实现文件上传和存储？（本地与S3配置）  实例解析angularjs的filter过滤器  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  如何快速完成中国万网建站详细流程？  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  浅谈javascript alert和confirm的美化  如何快速搭建个人网站并优化SEO？  手机软键盘弹出时影响布局的解决方法  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  Android仿QQ列表左滑删除操作  图册素材网站设计制作软件,图册的导出方式有几种？  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  如何基于云服务器快速搭建网站及云盘系统？  如何用景安虚拟主机手机版绑定域名建站？  Bootstrap CSS布局之列表  教你用AI润色文章，让你的文字表达更专业  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  EditPlus 正则表达式 实战(3)  如何在服务器上配置二级域名建站？  大同网页,大同瑞慈医院官网？  详解MySQL数据库的安装与密码配置  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  Android中AutoCompleteTextView自动提示  如何为不同团队 ID 动态生成多个独立按钮  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程