ES6 async/await 基础用法与阻塞机制解析

本文通过具体示例介绍ES6中async和await的基础用法，供读者参考学习。

async是异步编程领域的最新标准规范，下面将展示其具体使用方式。

1. async的基础应用

async function fn () {
 return 'abc'
}
console.log(fn());                    // Promise { 'abc' }
fn().then(res => {
 console.log(res);                    // "abc"
})

在函数定义前添加async关键字，可将同步函数转换为异步函数。无论函数内部返回何种值，调用该函数都会返回一个Promise对象，这表明async机制依然基于Promise实现，但其异步处理流程相比原生Promise更为简洁优雅。

2. await的基础应用

// 这里模拟一个耗时操作
function asyncFunc() {
 return new Promise( resolve => {
  setTimeout(() => {
   resolve(100)
  }, 1000);
 })
}

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
}

fn()

代码运行一秒后输出100。async与await配合使用时，await可以接收异步函数，使得整体代码结构看起来类似同步代码，但实际执行过程仍为异步操作。

在fn()函数定义中增加一行代码。

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
 console.log(200);                    // 200
}

执行上述代码可见，两次输出均在暂停一秒后打印。这表明当await后跟随的是Promise（即耗时操作）时，它会阻塞整个函数的后续执行，导致await之后的代码无法立即运行。

感兴趣的用户可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述内容对大家的JavaScript程序设计有所帮助。