在Angular2(ver2.0.x)中引入async/await功能

背景 – (Background)

使用Angular2的http模块是一个常见的情况,你可能会遇到在保存为变量后立即引用取回数据时出现未保存的情况,导致出现错误,像undefined之类的。(特别是在使用console.log等进行引用时容易遇到这种情况)

这个http模块的http通信是通过异步处理的,返回值是Observable或转换成的Promise对象。这被认为是“将来会存储的值”发生的前提。

我认为高级程序员可以解决这个问题,但我不太行,所以不知道该怎么办?

(更深层的背景是,希望能够立即获取OAuth2令牌并进行使用,关于这一点,请参考这里)

搭建一个可以使用async/await功能的环境。

在这种情况下,我们需要描述一个约会功能,而在Typescript中,有提供了async/await功能,我们应该使用它。(参考这篇文章和这本书的写法)

然而,为什么在当前状态下(2016年12月至2017年1月)使用通过ng new命令创建的Angular2默认环境却无法使用,需要稍作配置更改。

只有在以下情况下才能使用async/await功能:
a)开发环境为Typescript 1.7及以上版本 + 执行环境为ES6
b)开发环境为Typescript 2.1及以上版本 + 执行环境为ES5

就目前的条件而言,Angular2的环境是基于Typescript 2.0.x + 目标执行环境ES5,所以只能选择a)或者b)之一。总的来说,a)是可行的,而b)则较为困难。

a) 通过将tsconfig.json中的编译选项target执行环境从es5更改为es6来实现设置。

{
  "compilerOptions": {
    "lib": ["es6", "dom"],
(中略)
    "module": "es6",
(中略)
    "target": "es5",
  }
}

将这个最后的“目标”更改为“es6”。

以前,似乎需要使用Babel进行额外的编译,但这次不需要。

另一种途径 b) 是指以下部分适用于设置文件。

  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
(中略)
    "typescript": "~2.0.3"
  }

然而,虽然TypeScript 2.1支持ES5,但在Angular 2的环境下无法简单地进行更新。

2016年12月時,有報告指出,如果升級到Type Script 2.1版本的話,Angular會出現錯誤,而且Angular-cli在建構專案時會變得無回應。→「如果你正在使用Angular 2,就不要升級!因為會導致Angular-cli出現問題(在嘗試建構專案時無回應)。」

广告
将在 10 秒后关闭
bannerAds