Плюсы и минусы async/await (с внутренним толчком в конце)

предисловие

Во время интервью,async/awaitЭто точка, которая может ясно видеть знания испытуемого. Конечно, я понятия не имею, как объяснить этот пункт знания. Когда интервьюер спрашивает, вы можете ответить на синтаксический сахар генератора, который выполняется. Но вы переосмыслили это или видели его реализацию.

Как реализован бабел

Примечание. Если вы не знаете генератор, вы можете сначала взглянуть на генератор и, кстати, прочитать итератор.

бывший код:

async function t() {
    const x = await getResult();
  	const y = await getResult2();
  	return x + y;
}

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
        var info = gen[key](arg);
        var value = info.value;
    } catch (error) {
        reject(error);
        return;
    }
    if (info.done) {
        resolve(value);
    } else {
        Promise.resolve(value).then(_next, _throw);
    }
}

function _asyncToGenerator(fn) {
    return function () {
        var self = this, args = arguments;
        return new Promise(function (resolve, reject) {
            var gen = fn.apply(self, args);
            function _next(value) {
                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
            }
            function _throw(err) {
                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
            }
            _next(undefined);
        });
    };
}

function t() {
  return _t.apply(this, arguments);
}

function _t() {
  _t = _asyncToGenerator(function* () {
    const x = yield getResult();
    const y = yield getResult2();
    return x + y;
  });
  return _t.apply(this, arguments);
}

Как видно из кода, Babel преобразует генератор в асинхронный за два шага._asyncToGeneratorа такжеasyncGeneratorStep.

_asyncToGeneratorчто ты сделал

1. звонок_asyncToGeneratorВозвращается обещание, как раз в соответствии с характеристиками, которые могут получить асинхронные функции.

2. Определите метод успеха_next, который определяет метод, который не работает_throw. Две функции называютсяasyncGeneratorStep. прочитай этоasyncGeneratorStepПросто знайте, что это на самом деле рекурсия.

3. Выполнить_next. То есть упомянутый выше самоисполняющийся генератор.

asyncGeneratorStepчто ты сделал

1. try-catch для отлова ошибок во время выполнения генератора. В случае ошибки асинхронная функция находится непосредственно в состоянии отклонения.

2. Определить, является ли значение done в info истинным, если оно истинно, это означает, что итератор был выполнен, и значение значения может быть разрешено. В противном случае продолжайте звонить_nextПередайте значение следующему.

Единственное, чего я здесь не понимаю, так это `_throw`, который выглядит так, будто код не может быть выполнен. Значение статуса promise.resolve должно быть выполнено. Если вы понимаете, вы можете сказать мне в комментариях, спасибо.

Преимущества асинхронного/ожидания

Всякий раз, когда появляется новый синтаксический сахар, он должен компенсировать недостатки решения предыдущего поколения.

бывший:

Появление обещания - избегатьcallback hell, способ избежать этого - цепочка вызовов.

Так что же решает async/await?

Необходимость замены промисов на async/await

Синхронный способ борьбы с асинхронностью

Асинхронность/ожидание ближе к стилю синхронизации, а промис на пути к тому.По сравнению с асинхронностью/ожиданием кода будет больше, а асинхронность/ожидание мало чем отличается от синхронных функций, но пробел все же есть на пути обещания.

function getData() {
    getRes().then((res) => {
        console.log(res);
    })
}

const getData = async function() {
    const res = await getRes();
    console.log(res);
}

медиана

При использовании промисов вы обнаружите, что при сериализации нескольких промисов последующим промисам очень сложно получить значение предыдущих промисов. И асинхронность как раз решает эту проблему.

const morePromise = () => {
	return promiseFun1().then((value1) => {
		return promiseFun2(value1).then((value2) => {
			return promiseFun3(value1, value2).then((res) => {
				console.log(res);
			})
		}) 
	})
}

const morePromise = () => {
	return promiseFun1().then((value1) => {
		return promiseAll([value1, promiseFun2(value1)])
	}).then(([value1, value2]) => {
		return promiseFun3(value1, value2).then((res) => {
			console.log(res);
		})
	})
}

const morePromise = async function() {
	const value1 = await promiseFun1();
	const value2 = await promiseFun2(value1);
	const res = await promiseFun3(value1, valuw2);
	return res;
}

Последовательные асинхронные процессы должны включать промежуточные значения, поэтому преимущества async/await очевидны.

условное заявление

Например, есть текущее требование.После того, как вы запросите часть данных, вы можете определить, нужно ли вам запрашивать больше данных. При использовании промисов для их реализации по-прежнему будут вложенные уровни.

const a = () => {
    return getResult().then((data) => {
        if(data.hasMore) {
            return getMoreRes(data).then((dataMore) => {
                return dataMore;
            })
        } else {
            return data;
        }
    })
}

Но использование асинхронности для оптимизации этого примера может сделать код более элегантным.

const a = async() => {
    const data = await getResult();
    if(data.hasMore) {
        const dataMore = await getMoreRes(data);
        return dataMore;
    } else {
        return data;
    }
}

Недостатки асинхронного/ожидания

Выше мы говорили о преимуществах async/await, но async/await — это не панацея. Все вышесказанное касается сценария последовательной асинхронности. Когда мы станем параллельным асинхронным сценарием.Все еще нужно полагаться на promise.all для достижения

const a = async function() {
    const res = await Promise.all[getRes1(), getRes2()];
    return res;
}

Обработка ошибок для async/await

Async/await в основном использует try-catch для перехвата ошибок.

try-catch

const a = async () => {
    try{
        const res = await Promise.reject(1);
    } catch(err) {
        console.log(err);
    }
}

поймать обещание

Для этого можно извлечь публичную функцию. Поскольку обработка catch выполняется после каждого промиса, код будет очень подробным.

const a = async function() {
    const res = await Promise.reject(1).catch((err) => {
        console.log(err);
    })
}

// 公共函数

function errWrap(promise) {
    return promise().then((data) => {
        return [null, data];
    }).catch((err) => {
        return [err, null];
    })
}

задвинуть

В момент эпидемии только вступив в большую компанию, свежие студенты могут иметь хорошую защиту. Если небольшая компания не может выжить, увольняет или не может стать постоянной, она будет очень пассивной, если ее заставят набирать людей из общества.

Автор работает в Ali Retail. Студенты, которые хотят попасть внутрь, могут отправить электронное письмо по адресу 1445509994@qq.com. Массивный ХК! ! ! Вы также можете добавить группу q: 912253914. Пожалуйста, помогите с вашим резюме в свободное время.