Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

async await 和 promise 的关系 #149

Open
sisterAn opened this issue Feb 25, 2021 · 5 comments
Open

async await 和 promise 的关系 #149

sisterAn opened this issue Feb 25, 2021 · 5 comments
Labels

Comments

@sisterAn
Copy link
Owner

No description provided.

@GitYms
Copy link

GitYms commented Feb 25, 2021

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

@promiseLC
Copy link

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

@liyanangrace
Copy link

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

@zhang0ZGC
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants