async await 和 promise 的关系

[sisterAn]

[GitYms]

首先想到的是：async await 是promise的语法糖，async以同步的方式书写promise； 本质上都是异步的产物。
然后。。。。。。en....em....,

[promiseLC]

执行async函数，返回的是Promise对象
await相当于Promise的then
try...catch可捕获异常，相当于Promise的catch

[liyanangrace]

对于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，ES7的async-await带我们走向光明。
实际上，async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅，当然也增强了代码的可读性。
async-await 是建立在 promise机制之上的，但是并不能取代其地位。

[zhang0ZGC]

async/await 应该就是个语法糖，是对 Promise + Generator 的更好的封装，async/await 是后面才出现的(ES2017)，在这以前用 Generator 可以实现异步任务，如dva库的 effects 实现。Promise 相当于是 JS 引擎的底层异步 API，其它的异步方案是在它的基础上构建

通过 typescript 或 babel 的 playground，编写 async/await 代码转换到 ES2015 的语法就会发现，可以看到输出代码内部用的其实就是迭代器去实现的

原始 ES2017 代码

function asyncTask(){
 return new Promise(r => r('data'));
}

async function a(){
 const res = await asyncTask();
}
// 使用dva的时候，定义一个异步任务都是用如下的形式
const model = {
 effects: {
 *addUser(){
 const res = yield asyncTask();
 yield res.toString();
 }
 }
}

转换到ES2015的语法：

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 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) : adopt(result.value).then(fulfilled, rejected); }
 step((generator = generator.apply(thisArg, _arguments || [])).next());
 });
};
function asyncTask() {
 return new Promise(r => r('data'));
}
function a() {
 return __awaiter(this, void 0, void 0, function* () {
 const res = yield asyncTask();
 });
}
// 使用dva的时候，定义一个异步任务都是用如下的形式
const model = {
 effects: {
 *addUser() {
 const res = yield asyncTask();
 yield res.toString();
 }
 }
};

TypeScript Playground

[jaceechan]

async/await 是 yield 和 * 的语法糖，通过使用async/await可以通过更直观地使用同步的模式执行异步的操作