Все хорошее заканчивается
**Эта серия должна быть последним разделом здесь.** Первые две главы посвящены обещаниям, зачем сосредотачиваться на обещаниях? Потому что промисы сложнее использовать, чем асинхронные ожидания, а сами промисы не являются синтаксическим сахаром. Когда вы этого не знаете, у вас будет много проблем при его использовании, но у асинхронного ожидания таких проблем нет.Использование простое, а семантика ясна.
Понимание красоты асинхронности: Promise и async await (1)
Понимание красоты асинхронности: обещание и асинхронное ожидание (2)
Приступаем к изучению асинхронного ожидания
Всегда странно не говорить о шаблоне итератора
Для языка Java итератор является очень простым шаблоном, и структуры списка и множества имеют встроенные итераторы.
Но у javascript такого результата нет (ps: ES6 предоставляет наборы, и итераторы тоже можно реализовать), но мы с этим паттерном не особо практичны. Шаблон итератора относится к предоставлению способа последовательного доступа к элементам агрегатного объекта без раскрытия внутреннего представления объекта.
Итак: итератор — это возможность обойти весь элемент, не раскрывая внутреннее представление объекта.
Суть в том, что, не открывая внутреннюю часть, вы можете пройти внутрь.
Давайте реализуем простой итератор
// 在数据获取的时候没有选择深拷贝内容，
// 对于引用类型进行处理会有问题
// 这里只是演示简化了一点
function Iterdtor(arr){
let data = [];
if(!Array.isArray(arr)){
data = [arr];
}else{
data = arr;
}
let length = data.length;
let index = 0;
// 迭代器的核心next
// 当调用next的时候会开始输出内部对象的下一项
this.next = function(){
let result = {};
result.value = data[index];
result.done = index === length-1? true : false;
if(index !== length){
index++;
return result;
}
// 当内容已经没有了的时候返回一个字符串提示
return 'data is all done'
};
}
let arr = [1,2,3,4,5,6];
// 生成一个迭代器对象。
let iterdtor = new Iterdtor(arr);
iterdtor.next()
iterdtor.next()
Говоря об этом, многие люди не должны понимать, почему они говорят об итераторах.
После выполнения функции генератора она возвращает итератор
асинхронная функция - это синтаксический сахар для генератора
Эти две причины сразу показывают, что написание итераторов полезно.
Напишите простую функцию генератора
function *Iterdtor(){
console.log(1);
yield '123';
console.log(2);
yield '234';
console.log(3);
return '345'
}
let iterator = Iterdtor();
Когда дело доходит до блокировки, все думают о синхронном ожидании заблокированных потоков, что приведет к сильному зависанию страницы, что, очевидно, не очень хорошо.Зачем использовать такие вещи?
Давайте поговорим о преимуществах такого подхода к блокировке?
В функции Generator после того, как итератор вызовет следующую функцию, она будет продолжать выполняться до тех пор, пока позиция, отмеченная yield, не остановится. После ожидания следующего вызова next код продолжит выполнение до следующего представления yield. Если yield не будет, он будет выполняться до последней позиции возврата (без возврата весь код будет выполняться все время, это предложение кажется бредом).
Код подобен выдавливанию зубной пасты: выдавить немного, выдавить немного и выдавить полностью на одном дыхании.
Итак, каково было бы использовать метод Generator для обработки асинхронных запросов.
// 伪代码
let ajaxSign = false;
function *ajaxGetSomething(){
ajaxSomethingOne().then(res=>{ajaxSign = true})
yield
ajaxSign = false;
ajaxSomethingSecond().then(res=>{ajaxSign = true})
}
let iterator = ajaxGetSomething();
iterator.next();
while(ajaxSign){
iterator.next()
}
Что, если асинхронные запросы реализовать таким образом,
1: есть флаг, обозначающий завершение ajax-запроса.
2: Когда флаг имеет значение true, это означает, что выполнение ajax завершено, и можно выполнить следующее событие.
3: Когда флаг ложен, код ajax еще не выполнен, продолжайте блокировать следующий код.
4: Когда первый флаг равен true, выполните next(), а затем обнаружите, что между следующим yield есть асинхронный код, установите флаг в false, начните выполнение ajax и заблокируйте следующий контент.
5: Когда ajax завершен, флаг устанавливается в значение true, и содержимое начала 2 непрерывно выполняется до тех пор, пока не будет завершен весь итератор.
Вульгарные во время цикла достигают следующие звонки не желательны (в конце концов, псевдо-код)
Этот подход заставляет нас испытать еще один способ асинхронной обработки, заключающийся в блокировке асинхронной задачи при блокировке, поэтому вы можете почувствовать синхронный способ написания асинхронного кода и не будете в подходящее время. Перейдите к асинхронному производству, вы заблокируете нить, ты его не ждешь, у тебя не получится.
Как использовать асинхронное ожидание
Здесь понятнее, как их использовать.
async function ajaxGetData(){
xxxx
dosomething()
await ajaxGetDataFirst()
dosomething()
await ajaxGetDataSecond()
dosomething()
xxx
}
ajaxGetData()
На данный момент совершенно очевидно, что мы используем асинхронную функцию для борьбы с асинхронным эффектом.
Мы что-то сделали, а потом после асинхронного ajax-запроса дождались выполнения асинхронного события ajaxGetDataFirst и начали что-то делать. После завершения асинхронного события продолжайте выполнять следующие действия. Когда вы используете ключевое слово await, вы говорите следующий код, вы должны ждать этого фрагмента, и будет ваша очередь понять после того, как я выполню ожидание? Короче говоря, await виснет крайне.
Когда можно использовать await? Он используется только внутри тела асинхронной функции, и эта область не может быть унаследована.
new Promsie(async (resolve,reject)=>{
await xxx
})
// 这样的async才能使await有效果，书写在promise之外的话await就会像上面一样报错
Может ли await получить синхронную вещь? продолжить без блокировки
Какое значение возвращает асинхронная функция? Возвращаемое значение асинхронной функции — объект обещания,
? ? ? ? что возвращает объект обещания. Какая от этого польза? Пожалуйста, прослушайте анализ ниже Это означает, что после выполнения всех асинхронных запросов вы можете продолжать сохранять нужный вам результат в объекте промиса по возврату. Какая польза от обещаний? Кажется, что он может хранить значение и запускать функцию обратного вызова при заданных условиях (если вы не понимаете, вы можете посмотреть предыдущий контент), поэтому это может помочь нам выбросить данные внутреннего асинхронного запроса наружу. функции.
В сценариях использования нам иногда нужен асинхронный результат, например результат запроса Ajax.Что, если мы хотим получить этот асинхронный результат? На данный момент мне может помочь await, получить результат после выполнения асинхронной операции и выполнить ее последовательно после получения результата. До момента возврата возвращается результат,
Мы можем использовать оба следующих
async function fn(){
let result = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(100)
},10000)
}).then(res=>{
return res
})
return result
}
let a = fn()
async function fn(){
let result = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(100)
},10000)
})
return result
}
let a = fn()
В это время результаты асинхронных операций в нашей асинхронке естественно могут быть выброшены из функции для использования, что может решить многие проблемы бизнес-инкапсуляции.
Разница между асинхронным и генератором
В чем разница между асинхронным и генератором?
Асинхронность — это синтаксический сахар Генератора. Генератор можно использовать для реализации асинхронности. Суть использования Генератора для реализации асинхронности заключается в реализации такого рода самовыполнения без вызова следующего. Это то, чему я научусь в будущем (в настоящее время существует не хватает времени, я планирую написать специальную статью после того, как хорошо научусь реализовывать следующую асинхронность)
конец
В этом разделе не рассказывается об асинхронном контенте. Вместо этого сначала рассказывается об итераторах, затем генераторах и, наконец, краткое введение в использование асинхронности. Это порядок, в котором я изучал асинхронность. Асинхронность проста в использовании, Синхронное письмо тоже более привычно, но! ! ! Простые в использовании вещи часто означают, что внутри метода есть много вещей, которых вы не знаете. Это AV8D, который мы хотим раскопать! ! ! !
в заключении
Мы понимаем асинхронные вещи, процесс асинхронного выполнения программы и условия выполнения таблицы событий, очереди задач, макрозадачи и микрозадачи. Понимать использование асинхронных промисов, механизм реализации промисов, использование асинхронности и полученные знания об итераторах.
В течение этого периода времени и создания статей во время обучения возникает ощущение, что все подстегивают, хахахаха. Слово шпора немного странное. В ходе этого процесса я обнаружил, что обучение не может быть связано только с интересом. Интерес может помочь вам изучать контент, который вам нравится, и иметь неограниченную мотивацию. Как часы, вам все еще нужны шпоры, когда вы находитесь в нижней точке и не иметь никакого интереса. Приходите и помогите вам узнать новые знания, в которых вы не очень хороши,
В прошлом асинхронность была для меня худшей частью в освоении. На этом этапе я многому научился. Интересно, а вы как читатель многому научились? только вы знаете
Есть конец и начало
Сначала мы остановимся на красоте асинхронности.
В огромной серии глав ниже я собираюсьvuer-routerИсходный код систематически изучается, и вместе с обучением создаются документы, которые, как считается, продолжают поощрять и учиться вместе со всеми. Или знакомое заключительное замечание:Каждый фронтенд-кодер (мальчик и девочка), вы никогда не одиноки в битве~