{"componentChunkName":"component---src-templates-standard-tag-js","path":"/tags/promisy/","result":{"pageContext":{"page":{"id":"cGFnZToxMTA=","slug":"tag","title":"Tag","content":null,"databaseId":110,"featuredImage":null,"seo":{"focuskw":"","title":"Tag - Gladiatorzy JavaScriptu","opengraphTitle":"","metaKeywords":"","metaDesc":"","metaRobotsNofollow":"","metaRobotsNoindex":"","opengraphDescription":"","opengraphImage":null},"siteMetaData":{"description":"Gladiatorzy JavaScriptu","language":"pl_PL","title":"Gladiatorzy JavaScriptu","url":"http://gladiatorzy.api.localhost-group.com"}},"tag":{"slug":"promisy","name":"promisy","count":1},"products":[],"posts":[{"id":"cG9zdDo3OTc=","slug":"async-await-nie-takie-fajne-jak-myslisz-prostota-syntaxu-kosztem-uzytkownika","title":"Async / await &#8211; nie takie fajne jak myślisz &#8211; prostota syntaxu kosztem użytkownika","date":"2020-09-28T18:07:45","databaseId":797,"content":"\n<h3>Dzisiaj chciałbym poruszyć pewien temat, który pewnie nie jest wszystkim znany, a jeśli już jest znany to nie znają go na tyle, aby uświadomić sobie, że ma często więcej wad niż zalet </h3>\n\n\n\n<p>Będę dzisiaj kodzić w promisach i w async / await i liczyć czas wykonywania się wielu promisów. Także zaczynamy!</p>\n\n\n\n<p>Tym postem chciałbym pokazać, że pisanie kodu z async / await nie jest optymalne w przypadku więcej niż jednej promisy i stosowanie async / await w przypadku realnych przypadków może spowolnić Twój kod N-razy (N to liczba promis w funkcji)</p>\n\n\n\n<p>Cały przykład ma pokazać analogiczną sytuację, w której np na początku działania apki, robimy 3 zapytania do api np po posty, produkty i komentarze i chcemy zaprezentować aplikację.<strong> Symulacja zapytania rozpatruje tylko pozytywny przypadek (status 200 w response)</strong></p>\n\n\n\n<p>Zacznijmy od napisania sobie prostego poletka testowego w kilkoma promisami:</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"826\" height=\"188\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-10.png\" alt=\"\" class=\"wp-image-801\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-10.png 826w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-10-300x68.png 300w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-10-768x175.png 768w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-10-600x137.png 600w\" sizes=\"(max-width: 826px) 100vw, 826px\" /></figure>\n\n\n\n<p>Tworzę sobie funkcję generującą promisę, która trwa 1 sekundę i przepycham definicję tej funkcji do arraya testowego, aby wywołać to nie od razu tylko w miejscu, w którym chcę to wywołać &#8211; czyli na inicjalizacji naszej zmyślonej &#8222;apki&#8221;</p>\n\n\n\n<h3>Jako benchmark weźmiemy sobie Promise.all:</h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"595\" height=\"279\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-8.png\" alt=\"\" class=\"wp-image-799\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-8.png 595w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-8-300x141.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" /><figcaption>ostatni element arraya result to czas wykonania w milisekundach</figcaption></figure>\n\n\n\n<p>Czas wykonania Promise.all to niewiele ponad 1 sekundę</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"421\" height=\"71\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-9.png\" alt=\"\" class=\"wp-image-800\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-9.png 421w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-9-300x51.png 300w\" sizes=\"(max-width: 421px) 100vw, 421px\" /></figure>\n\n\n\n<p>Czyli wszystkie 3 promisy zostały wystartowane jednocześnie i skończyły się prawie jednocześnie &#8211; jest to najlepszy, możliwy scenariusz</p>\n\n\n\n<h3>Teraz zbudujemy Promise.all od zera w oparciu o podstawową wiedzę o promisach:</h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"583\" height=\"420\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-13.png\" alt=\"\" class=\"wp-image-802\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-13.png 583w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-13-300x216.png 300w\" sizes=\"(max-width: 583px) 100vw, 583px\" /><figcaption>ostatni element arraya result to czas wykonania w milisekundach</figcaption></figure>\n\n\n\n<p>Czas wykonywania naszej metody Promise.all opartej o wiedzę z promisów to również niewiele ponad sekundę (1ms mniej niż Promise.all to błąd pomiaru):</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"377\" height=\"66\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-14.png\" alt=\"\" class=\"wp-image-803\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-14.png 377w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-14-300x53.png 300w\" sizes=\"(max-width: 377px) 100vw, 377px\" /></figure>\n\n\n\n<p>Czyli znów wszystkie 3 promisy zostały wystartowane jednocześnie i skończyły się prawie jednocześnie &#8211; jest to kolejny najlepszy, możliwy scenariusz &#8211; <strong>jednak dla uproszczenia polecam stosować Promise.all</strong></p>\n\n\n\n<h3>A teraz &#8222;król parkietu&#8221; &#8211; async / await</h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"527\" height=\"381\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-15.png\" alt=\"\" class=\"wp-image-806\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-15.png 527w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-15-300x217.png 300w\" sizes=\"(max-width: 527px) 100vw, 527px\" /><figcaption>ostatni element arraya result to czas wykonania w milisekundach</figcaption></figure>\n\n\n\n<p>Czas wykonywania naszej metody Promise.all opartej o async / await to aż 3 sekundy!! <strong>czyli 3 razy dłużej</strong>. W przypadku 4 zapytań do api będzie to 4x dłużej</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"422\" height=\"47\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-16.png\" alt=\"\" class=\"wp-image-807\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-16.png 422w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-16-300x33.png 300w\" sizes=\"(max-width: 422px) 100vw, 422px\" /></figure>\n\n\n\n<p>Czyli przez Twoją chęc zastosowania async / await kazałeś użytkownikowi aplikacji czekać 3 razy dłużej niż to realnie koniecznie </p>\n\n\n\n<h3>Tak wiem &#8211; zaraz ktoś się przyczepi, że to przypadek testowy albo, że można to inaczej napisać &#8211; tutaj chodziło głównie o pokazanie pewnego schematu</h3>\n\n\n\n<p>Dlatego chciałem też pokazać przypadek, który bardzo często widzę w jakichś projektach do portfolio, albo <strong>(o zgrozo&#8230;) na tutorialach&#8230; </strong>commit mi się cofa jak widzę, że tutorial obejrzało 10-15 tysięcy potencjalnych programistów i nauczyło się takich głupot</p>\n\n\n\n<h3>Więc odzwierciedlając przypadek stricte tutorialowy, robimy 3 zapytania do api z async / await i try / catch, aby wychwycić ewentualne błędy</h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"568\" height=\"477\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-17.png\" alt=\"\" class=\"wp-image-808\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-17.png 568w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-17-300x252.png 300w\" sizes=\"(max-width: 568px) 100vw, 568px\" /></figure>\n\n\n\n<h4>I znów powtarza się ta sama sytuacja &#8211; 3 zapytania 3 sekundy czekania użytkownika na załadowanie aplikacji</h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"485\" height=\"67\" src=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-18.png\" alt=\"\" class=\"wp-image-809\" srcset=\"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-18.png 485w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/image-18-300x41.png 300w\" sizes=\"(max-width: 485px) 100vw, 485px\" /></figure>\n\n\n\n<h3>3 zdania podsumowania:</h3>\n\n\n\n<ul><li>im mniej async / await w Twoim kodzie tym (prawdopodobnie) lepiej dla użytkownika</li><li>jeśli stosujesz async / await to pamiętaj, aby w zakresie funkcji była tylko jedna promisa, która &#8222;awaitujesz&#8221;, bo każda kolejna powoduję wydłużenie działania Twojego kodu</li><li>nie wszystko co widzisz na popularnych tutorialach to optymalny kod i należy powtarzać to w swoim projekcie</li></ul>\n\n\n\n<h4>EDIT &#8211; Sugestia zakończenia od Bartka Banacha:</h4>\n\n\n\n<p>Tak więc radzę na to uważać i używać Promise.all jeśli chcemy wykonać kilka zapytań do api jednocześnie, bo async / await wcale jednoczesności nie zapewnia, a tylko upraszcza składnię w kodzie dla programisty</p>\n\n\n\n<p>Do następnego commita!</p>\n","featuredImage":{"altText":"","sizes":"(max-width: 300px) 100vw, 300px","sourceUrl":"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34.jpeg","srcSet":"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34-300x200.jpeg 300w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34-1024x683.jpeg 1024w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34-768x512.jpeg 768w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34-600x400.jpeg 600w, https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34.jpeg 1350w"},"categories":{"nodes":[{"slug":"materialy-do-nauki","id":"Y2F0ZWdvcnk6NjM=","name":"Materiały do nauki"}]},"tags":{"nodes":[{"slug":"javascript","name":"javascript","count":11},{"slug":"programowanie","name":"programowanie","count":42},{"slug":"promisy","name":"promisy","count":1}]},"comments":{"nodes":[]},"seo":{"title":"Async / await - nie takie fajne jak myślisz - prostota syntaxu kosztem użytkownika - Gladiatorzy JavaScriptu","opengraphTitle":"Async / await - nie takie fajne jak myślisz - prostota syntaxu kosztem użytkownika - Gladiatorzy JavaScriptu","metaKeywords":"","metaDesc":"Dzisiaj chciałbym poruszyć pewien temat, który pewnie nie jest wszystkim znany, a jeśli już jest znany to nie znają go na tyle, aby uświadomić sobie, że ma często więcej wad niż zalet","metaRobotsNofollow":"","metaRobotsNoindex":"","opengraphDescription":"Dzisiaj chciałbym poruszyć pewien temat, który pewnie nie jest wszystkim znany, a jeśli już jest znany to nie znają go na tyle, aby uświadomić sobie, że ma często więcej wad niż zalet","opengraphImage":{"sourceUrl":"https://gladiatorzy.api.localhost-group.com/wp-content/uploads/2020/09/photo-1596877153829-06339298dc34.jpeg"}},"siteMetaData":{"description":"Gladiatorzy JavaScriptu","language":"pl_PL","title":"Gladiatorzy JavaScriptu","url":"http://gladiatorzy.api.localhost-group.com"}}]}},"staticQueryHashes":[]}