TyepScript入门教程之 async await

涵盖相同内容的PRO Egghead视频课程

作为一个思想实验，可以设想以下内容：一种告诉JavaScript运行await时在对promise使用时暂停关键字上代码的执行，并且仅恢复一次（如果返回）从函数返回的promise的方式：

// Not actual code. A thought experiment
async function foo() {try {var val = await getMeAPromise();console.log(val);}catch(err) {console.log('Error: ', err.message);}
}

当承诺达成后，执行就会继续，

如果完成，则等待将返回该值，
如果拒绝，则会同步引发错误，我们可以捕获该错误。

这突然地（神奇地）使异步编程和同步编程一样容易。此思想实验所需的三件事是：

暂停功能执行的能力。
可以在函数内放置值。
能够在函数内部引发异常。

这正是发电机允许我们做的！思想实验实际上是真实的，因此TypeScript / JavaScript中的async/ await实现也是如此。在幕后，它仅使用生成器。

生成JavaScript

您不必理解这一点，但是如果您阅读了generators，这很简单。该函数foo可以简单地包装如下：

const foo = wrapToReturnPromise(function* () {try {var val = yield getMeAPromise();console.log(val);}catch(err) {console.log('Error: ', err.message);}
});

在wrapToReturnPromise刚刚执行生成函数来获取generator，然后使用generator.next()，如果该值是promise它会then+ catch的承诺，并根据结果调用generator.next(result)或generator.throw(error)。而已！

TypeScript中的异步等待支持

从1.7版开始，TypeScript支持Async-Await。异步函数以async关键字为前缀；await暂停执行，直到完成异步函数返回诺言，并从返回的Promise中解包该值。仅支持将目标 es6直接移植到ES6生成器。

TypeScript 2.1 在ES3和ES5运行时中添加了此功能，这意味着无论使用什么环境，您都可以自由地利用它。重要的是要注意，我们可以在TypeScript 2.1中使用async / await，并且支持许多浏览器，当然，已经为Promise全局添加了polyfill。

让我们看一下这个例子，看看下面的代码，了解TypeScript异步/等待表示法是如何工作的：

function delay(milliseconds: number, count: number): Promise<number> {return new Promise<number>(resolve => {setTimeout(() => {resolve(count);}, milliseconds);});
}// async function always returns a Promise
async function dramaticWelcome(): Promise<void> {console.log("Hello");for (let i = 0; i < 5; i++) {// await is converting Promise<number> into numberconst count:number = await delay(500, i);console.log(count);}console.log("World!");
}dramaticWelcome();

转换为ES6（--target es6）

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {return new (P || (P = Promise))(function (resolve, reject) {function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }step((generator = generator.apply(thisArg, _arguments || [])).next());});
};
function delay(milliseconds, count) {return new Promise(resolve => {setTimeout(() => {resolve(count);}, milliseconds);});
}
// async function always returns a Promise
function dramaticWelcome() {return __awaiter(this, void 0, void 0, function* () {console.log("Hello");for (let i = 0; i < 5; i++) {// await is converting Promise<number> into numberconst count = yield delay(500, i);console.log(count);}console.log("World!");});
}
dramaticWelcome();

您可以在此处看到完整的示例。

转换为ES5（--target es5）

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {return new (P || (P = Promise))(function (resolve, reject) {function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }step((generator = generator.apply(thisArg, _arguments || [])).next());});
};
var __generator = (this && this.__generator) || function (thisArg, body) {var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;function verb(n) { return function (v) { return step([n, v]); }; }function step(op) {if (f) throw new TypeError("Generator is already executing.");while (_) try {if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;if (y = 0, t) op = [0, t.value];switch (op[0]) {case 0: case 1: t = op; break;case 4: _.label++; return { value: op[1], done: false };case 5: _.label++; y = op[1]; op = [0]; continue;case 7: op = _.ops.pop(); _.trys.pop(); continue;default:if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }if (t[2]) _.ops.pop();_.trys.pop(); continue;}op = body.call(thisArg, _);} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };}
};
function delay(milliseconds, count) {return new Promise(function (resolve) {setTimeout(function () {resolve(count);}, milliseconds);});
}
// async function always returns a Promise
function dramaticWelcome() {return __awaiter(this, void 0, void 0, function () {var i, count;return __generator(this, function (_a) {switch (_a.label) {case 0:console.log("Hello");i = 0;_a.label = 1;case 1:if (!(i < 5)) return [3 /*break*/, 4];return [4 /*yield*/, delay(500, i)];case 2:count = _a.sent();console.log(count);_a.label = 3;case 3:i++;return [3 /*break*/, 1];case 4:console.log("World!");return [2 /*return*/];}});});
}
dramaticWelcome();

您可以在此处看到完整的示例。

注意：对于这两种目标方案，我们都需要确保我们的运行时在全球范围内都具有与ECMAScript兼容的Promise。这可能涉及为Promise争取一个polyfill。我们还需要通过将lib标志设置为“ dom”，“ es2015”或“ dom”，“ es2015.promise”，“ es5”之类的内容来确保TypeScript知道Promise的存在。 我们可以在此处查看哪些浏览器确实有Promise支持（本地和多填充）。

翻译来源：https://gitee.com/yunwisdoms/typescript-book/blob/master/docs/async-await.md