предисловие
предыдущий пост«Серия вопросов для предварительного интервью 1» Заголовок сегодняшнего интервью и анализ идейупомянутый асинхронный / ожидающий. Официально он был предложен в ES8, но я обнаружил, что мои друзья мало используют async/await. Итак, сегодня мы конкретно поговорим о том, что такое асинхронная функция и каковы преимущества ее написания и использования по сравнению с Promise.
Знакомые студенты также могут просмотреть прошлое и узнать новое, и текст начинается. . .
Что такое асинхронная функция?
Когда дело доходит до вложенности асинхронных функций обратного вызова, это всегда будет раздражать людей, особенно когда бизнес-логика сложна, часто требуется несколько вызовов ajax, чтобы получить все необходимые данные.
От самой ранней функции обратного вызова до объекта Promise и функции Generator каждый раз улучшалась, но она казалась неполной. Все они имеют дополнительные сложности, и оба требуют понимания основного рабочего механизма абстракции. Итак, нам нужен способ более элегантного решения асинхронных операций. Так появилась асинхронная функция.
Объяснение одним предложением: асинхронные функции — это синтаксический сахар для функций-генераторов.
Он имеет следующие особенности:
- Построен на обещаниях. Поэтому его нельзя использовать с функциями обратного вызова. Но он объявляет асинхронную функцию и неявно возвращает обещание. Таким образом, переменные могут быть возвращены напрямую, нет необходимости использовать Promise.resolve для преобразования.
- Как и промисы, они не блокируют. Но нет необходимости писать тогда и свою callback-функцию, которая уменьшает количество строк кода и позволяет избежать вложенности кода. Более того, все асинхронные вызовы могут быть записаны в одном и том же блоке кода без определения избыточных промежуточных переменных.
- Его самая большая ценность заключается в том, что он может сделать асинхронный код по форме ближе к синхронному коду.
- Он всегда используется с ожиданием. Кроме того, await может находиться только в теле асинхронной функции.
- await — это оператор, используемый для формирования выражений, который блокирует последующий код. Если ожидает объект Promise, получите его значение разрешения. В противном случае вы получите результат вычисления выражения.
Почему асинхронные функции — это синтаксический сахар
Реализация асинхронной функции на самом деле состоит в том, чтобы обернуть функцию генератора и автоматический исполнитель в функцию. Следующий пример взят от г-на Руана.«Значение и использование асинхронных функций»одна статья.
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function*() {
// ...
});
}
// spawn 函数就是自动执行器
function spawn(genF) {
return new Promise(function(resolve, reject) {
var gen = genF();
function step(nextF) {
try {
var next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}
Итак, асинхронные функции — это синтаксический сахар для функций-генераторов. Кроме того, он относительно новый и относится к синтаксису ES8. Но транскодер Babel уже поддерживает его и может использоваться после перекодирования.
Преимущества асинхронности перед промисами
1. Он обрабатывает цепочки потом лучше, чем Promises
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
Теперь используйте Promise для реализации обработки этих трех шагов.
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
});
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
Если реализовать с помощью async/await, это будет выглядеть так:
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
}
doIt();
Результат такой же, как и в предыдущей реализации Promise, но код выглядит намного чище, почти так же, как синхронный код.
2. Промежуточное значение
Теперь составляем бизнес-требования, все еще три шага, но каждый шаг нуждается в результатах каждого шага. Реализация HOMISE выглядит очень ореоло, проходя параметры слишком много.
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => {
return step2(time1, time2)
.then(time3 => [time1, time2, time3]);
})
.then(times => {
const [time1, time2, time3] = times;
return step3(time1, time2, time3);
})
.then(result => {
console.log(`result is ${result}`);
});
}
doIt();
Используйте Async / ждут, чтобы написать:
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time1, time2);
const result = await step3(time1, time2, time3);
console.log(`result is ${result}`);
}
doIt();
Никаких лишних промежуточных значений, реализовано более изящно.
3. Отладка
Легче отлаживать, чем Promises.
Поскольку блоков кода нет, вы не можете устанавливать точки останова в возвращаемой стрелочной функции. Если вы используете функцию отладчика step-over внутри блока .then, отладчик не будет переходить в последующие блоки .then, поскольку отладчик может только отслеживать каждый шаг синхронного кода.
Теперь, если вы используете async/await, вам больше не нужно использовать стрелочные функции. Вы можете выполнять пошаговые операции над операторами ожидания, как если бы они были обычными синхронными операторами.
Суммировать
Каждая функция появляется, всегда есть ее использование, и только когда она используется, ее можно лучше понять.
Метод асинхронного написания JavaScript, от callback-функции до Promise, от Generator до Async/Await. На первый взгляд это только смена написания, но по сути это абстракция языкового слоя снова и снова. Позволяет нам достичь той же функциональности более простым способом, не задумываясь о том, как выполняется код.
Другими словами:Наивысшее состояние асинхронного программирования заключается в том, что вам не нужно заботиться о том, асинхронно оно или нет..
использованная литература
PS: Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись «Super Brother Front-end Small Stack», чтобы обменяться идеями и технологиями.