Научете как да създавате асинхронни програми с JavaScript

Асинхронното програмиране е основен елемент в разработката на софтуер. Трудно е да се повярва, че тази концепция за програмиране съществува едва от двадесет и първи век. Езикът за програмиране F# беше първият сред своите колеги, който въведе асинхронно програмиране през 2007 г.

Други езици като C#, Python, JavaScript и C++ постепенно добавиха поддръжка за асинхронно програмиране. Големият въпрос е каква стойност добавя асинхронното програмиране към вашите приложения?

Тази статия отговаря на този и други въпроси, така че ще разберете всичко за това как да използвате асинхронно програмиране.

Какво е синхронно програмиране?

Синхронното програмиране се отнася до програма в най-основната й форма. Този модел на програмиране обработва редовете код в програма или скрипт последователно. Винаги започва от първия ред код в програмата. След това изчаква, докато всеки ред код завърши изпълнението си, преди да премине към следващия.

Синхронният модел включва и условен код, като напр ако и докато изявления. Въпреки че ще се изпълни само някакъв код в условен израз, програмата ще продължи да работи последователно.

Пример за синхронна програма

const SyncCode = () => {
 console.log("Това е първият ред в програмата")
 console.log("Това е вторият ред в програмата")
 console.log("Това е последният ред в програмата")
}
SyncCode();

Изпълнението на програмата JavaScript по-горе ще доведе до следния изход в конзолата:

Това е първият ред в програмата
Това е вторият ред в програмата
Това е последният ред в програмата

Резултатът по-горе е точно това, което трябва да очаквате. Програмата започва отгоре и изчаква, докато завърши един ред код, преди да премине към следващия.

Какво е асинхронно програмиране?

Асинхронното програмиране е обратното на синхронното програмиране. Моделът за асинхронно програмиране обработва няколко реда кодове едновременно. Той не чака, докато предишният ред код в програмата завърши изпълнението си, преди да премине към следващия.

Свързани: Синхронно срещу Асинхронно програмиране: Как се различават?

Асинхронното програмиране може да намали времето за изпълнение наполовина, създавайки ефективно по-бързи компютри.

Пример за асинхронна програма

const AsyncCode = () => {
 console.log("Това е първият ред в програмата")
 setTimeout(() => {
 console.log("Това е вторият ред в програмата")
 }, 3000)
 console.log("Това е последният ред в програмата")
}
AsyncCode();

Изпълнението на JavaScript кода по-горе ще доведе до следния изход във вашата конзола:

Това е първият ред в програмата
Това е последният ред в програмата
Това е вторият ред в програмата

Ако сравните изхода на конзолата по-горе с асинхронната програма, която го генерира, ще видите, че има очевидно несъответствие. Обаждането към дневник който казва „Това е вторият ред в програмата“ се появява преди този, който казва „Това е последният ред в програмата“. Изходът на конзолата обаче не отразява това.

Като се има предвид, че JavaScript е предимно синхронен, кодът в програмата по-горе се изпълняваше последователно. Но JavaScript поддържа асинхронно програмиране чрез функции като setTimeout() метод.

В setTimeout() method е асинхронен JavaScript метод, който приема два аргумента: функция и забавяне. Закъснението е таймер (в милисекунди), който забавя изпълнението на функцията. Така че, докато програмата по-горе чака трите секунди, за да изпълни функцията в setTimeout() метод, той преминава към следващия ред в кода. Това води до изпълнение на третото извикване на функция преди второто.

Асинхронни JavaScript технологии

Освен на setTimeout() метод, споменат по-горе, няколко технологии на JavaScript използват асинхронно програмиране. Тези технологии използват модела за асинхронно програмиране за разработване на по-бързи неблокиращи приложения. Някои от тези технологии включват:

• jQuery Ajax
• Axios
• NodeJS

Свързани: Какво е Node.js? Ето как да използвате JavaScript от страна на сървъра

Създаване на асинхронни програми с JavaScript

Има няколко начина за работа с асинхронен код. Методът, който избирате, трябва да зависи от типа приложение, което искате да разработите. Тези методи включват функции за обратно извикване, обещания и async/await.

Функции за обратно извикване

Има две важни свойства на функцията за обратно извикване. Те служат като параметри за други функции и разчитат на външни събития, за да изпълнят задълженията си. В setTimeout() методът, използван в асинхронния пример по-горе, е функция за обратно извикване. Програмата му предава функция за лог като параметър (функцията за обратно извикване) и я изпълнява само след три секунди (събитието).

Функциите за обратно извикване са страхотни за малки програми, но с нарастването на вашите приложения те могат да станат твърде сложни много бързо. Това е така, защото функциите за обратно извикване често извикват други функции за обратно извикване, създавайки верига от вложени обратни извиквания.

Използване на обещания

JavaScript добави поддръжка за обещания след функции за обратно извикване. Те са добра алтернатива при създаване на по-големи приложения. Обещанието представлява какво може да се случи след асинхронна операция. Този потенциален резултат ще приеме една от двете форми: разрешени или отхвърлени. Отделна функция обработва всеки от тези резултати, премахвайки необходимостта от влагане (проблемът с функцията за обратно извикване). Вместо това обещанията насърчават верижните функции, които са по-лесни за използване.

Всяко обещание започва с ново Обещай обект, който има анонимна функция с реши и отхвърлям параметри. В рамките на тази функция ще имате асинхронното приложение, което връща разрешаване, ако асинхронната операция е успешна, или отхвърляне в противен случай.

В тогава() функция верига се справя с реши функция и хващам () функция верига се справя с отхвърлям функция. Така че няма нужда от вложени оператори if, какъвто е случаят с функциите за обратно извикване.

Използване на пример за обещания

const PromiseFunction = () =>{
 връщане на ново обещание((решаване, отхвърляне) => {
 setTimeout(() => {
 resolve("тази асинхронна операция е изпълнена добре")
 }, 3000)
 })
}
PromiseFunction().then((резултат) => {
 console.log("Успех", резултат)
}).catch((грешка) => {
 console.log("Грешка", грешка)
})

Кодът по-горе връща следния изход в конзолата:

Успех, тази асинхронна операция е изпълнена добре

Това е така, защото обещанието връща реши функция, която предава резултатите си на тогава() функция. Ако обещанието върне отхвърлям функция, която програмата използва улов функция вместо това.

Използване на Async/Await

Ако не искате да създавате верига от обещания, когато се занимавате с асинхронни операции, тогава можете да опитате async/await. Async/await не е напълно различен асинхронен инструмент от обещанията, а просто различен начин за работа с тях. Той обработва обещания, без да използва метода на веригата. Така че, по същия начин, по който обещанията се справят с асинхронните операции по-добре от функциите за обратно извикване, async/await има предимства пред обикновените обещания.

Има два ключови атрибута на всяка функция async/await. Те започват с асинхронно ключова дума и чакам ключова дума изчаква резултата от асинхронна операция.

Пример за асинхронна/изчакваща програма

const PromiseFunction = () =>{
 връщане на ново обещание((решаване, отхвърляне) => {
 setTimeout(() => {
 resolve("тази асинхронна операция е изпълнена добре")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const резултат = чакам PromiseFunction();
 console.log (резултат);
}
AsyncAwaitFunc();

Кодът по-горе ще върне следния изход в конзолата:

тази асинхронна операция се изпълнява добре

Кои са основните изводи?

Има няколко основни точки, които трябва да вземете от тази статия:

• Асинхронното програмиране е ценно, защото намалява времето за изчакване на програмата, създавайки по-бързи приложения.
• Функцията за обратно извикване може да бъде синхронна или асинхронна.
• Обещанията предлагат по-добър начин за обработка на асинхронни операции от функциите за обратно извикване.
• Функциите Async/await обработват обещанията по по-добър начин от използването на верижни функции.
• Функцията async/await обработва асинхронните операции по начин, който изглежда синхронен, което я прави по-лесна за разбиране.
• Функциите със стрелки ви помагат да пишете по-добър код.

Функциите със стрелка на JavaScript могат да ви направят по-добър разработчик

Искате ли да бъдете по-добри в уеб разработката? Функциите със стрелки, добавени към JavaScript ES6, ви дават два начина за създаване на функции за уеб приложения.

Прочетете Следващото

За автора