从async await 报错Unexpected identifier 谈谈对上下文的理解

原文首发地址:/lonhon/p/7518231.html

先简单介绍下async await:

  async/await是ES6推出的异步处理方案,目的也很明确:更好的实现异步编程。   详细见阮大神 ES6入门

现在说说实践中遇到的问题:使用await报错Unexpected identifier

先上代码:

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(('999'));
        }, time);
    })
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var start = async function(){
    arr.forEach(()=>{
        console.log( await sleep(2000) )
    })
}
start();

 

 

在循环中使用sleep方法,这时候报错:Unexpected identifier

 

原因:通过查资料发现一句话 await必须在async函数的上下文中。(后面重点讲)通过个人理解的这句话就是await只能在async函数中使用。

以上面的代码为例子,虽然最外层start函数是通过async声明的,在start函数体内部的箭头函数中使用了await,而该箭头函数是一个普通函数,所以await的上文是一个普通函数,最终导致报错。

解决办法,将箭头函数声明为async函数,代码如下:

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(console.log('999'));
        }, time);
    })
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var start = function(){
    arr.forEach(async ()=>{
        await sleep(2000)
    })
}
start();

运行结果:

 

至此,问题解决。

 

 

await必须在async函数的上下文中。出处

上下文,英文context,其完整意思应当是concatenate-text,联系文本,编程中翻译为“引用池”或者“引用区”更加恰当

先举个例子:

③.小明说:重启试试

单从这句话我们不能知道重启什么、为什么小明要说这句话(可能你觉得是电脑)、对谁说的这句话

②.小红说对小明说她微信出来不了输入法

这就是小明为什么说这句话的上文(背景),这时候才能知道小明说的重启是微信程序or手机(真不是电脑)

①.小红和小明躺在床上玩手机

这句也是背景,但是却不能成为3的上文,因为“躺床上”并不是“重启试试”的原因(或者说背景)

 

函数调用会在内存形成一个"调用记录",又称"调用帧"(call frame),保存调用位置和内部变量等信息

个人理解:上文指出了环境、背景。

拿本文中的第一段错误代码来说,await的上文是一个普通箭头函数,所以使用await会报错,因为编译器在执行到await时,当前调用帧是箭头函数而不是外层的start,所以此时的await就像:小明和小红躺在床上 小明说“重启试试”  ,是无意义(Unexpected identifier)的。

这时候谈谈下文,接上面的例子

④.小红重启了手机

这时候④就是③的下文

 

需要注意的是,上下文是一个整体,上面我把它分开只是为了理解,实际过程中,不存在单独的上文和下文,所以这是await 必须在async 的上下文 的具体意义。

 

posted @ 2017-09-13 23:02 游龙翔隼 阅读(...) 评论(...) 编辑 收藏