04.精读AsyncAwait优越之处.md

精读 AsyncAwait 优越之处.md

前端异步规范

• 古往 Callback Hell Promise/Deferred 规范混战
• 今来 Generator 配合 co Async/await 杀疯

概要 Async/Await 优点

• 语法简洁清晰，节省了很多不必要的匿名函数
• 直接使用 try ... catch 进行异常处理
• 添加条件判断更符合直觉
• 减少不必要的中间变量
• 更清晰的错误堆栈
• 调试时可以轻松给每个异步调用加断点

局限：

• 降低阅读理解代码的速度,以前看到.then()就知道时异步，现在需要识别 async 和 await 关键字

用法

async function createNewDoc() { let response = await db.post({}); return await db.get(response.id); }

Async/await 是怎么实现的

• 描述： 一个 Async 函数总是会返回一个 Promise

async function test() {
	const img = await fetch('tiger.jpg'); 
}

• babel 转换后

'use strict';

var test = function() {
    var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
        var img;
        return regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
                switch (_context.prev = _context.next) {
                    case 0:
                        _context.next = 2;
                        return fetch('tiger.jpg');

                    case 2:
                        img = _context.sent;

                    case 3:
                    case 'end':
                        return _context.stop();
                }
            }
        }, _callee, this);
    }));

    return function test() {
        return _ref.apply(this, arguments);
    };
}();

function _asyncToGenerator(fn) {
    return function() {
        var gen = fn.apply(this, arguments);
        return new Promise(function(resolve, reject) {
            function step(key, arg) {
                try {
                    var info = gen[key](arg);
                    var value = info.value;
                } catch (error) {
                    reject(error);
                    return;
                }
                if (info.done) {
                    resolve(value);
                } else {
                    return Promise.resolve(value).then(function(value) {
                        step("next", value);
                    }, function(err) {
                        step("throw", err);
                    });
                }
            }
            return step("next");
        });
    };
}

• Async/Await 的实现被转换成了基于 Promise 的调用。值得注意的是，原来只需 3 行代码即可解决的问题，居然被转换成了 52 行代码，这还是基于执行环境中已经存在 regenerator 的前提之一。如果要在兼容性尚不是非常理想的 Web 环境下使用，代码 overhead 的成本不得不纳入考虑。

• 缺陷二 Async/await 并不能很好的支持异步并发 实现异步并发还需要 Promise.all 封装一层