目的 $.ajaxをasync awaitを用いた同期処理で書く。 Ajax通信を待ってから処理に進む。 同期処理が入れ子にならず、クリーンに書くことができる。 IEには対応していない。注意。 経緯 保守の際、既存コードがjqueryのajaxで記述されていた。 jquery自体は別に良い。 だが、大量のコールバックによる入れ子で非常に見通しが悪くなっていた。 それをasync awaitを用いた同期処理にリファクタリングをした際の備忘録である。 書き方 フルーツID🔑からフルーツ名🍒を取得する。 /** * フルーツ名を取得する * * @param {string} fruitId */ async function getFruitName(fruitId) { const fruitRequest = {id: fruitId} const fruitResult = awai
![$.ajax(jQuery.ajax)の非同期処理をasync awaitの入れ子なし同期処理で記述する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c05073059a6f4eb9392f58e32e511dccf77e6e44/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTI0LmFqYXglMjhqUXVlcnkuYWpheCUyOSVFMyU4MSVBRSVFOSU5RCU5RSVFNSU5MCU4QyVFNiU5QyU5RiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MiU5MmFzeW5jJTIwYXdhaXQlRTMlODElQUUlRTUlODUlQTUlRTMlODIlOEMlRTUlQUQlOTAlRTMlODElQUElRTMlODElOTclRTUlOTAlOEMlRTYlOUMlOUYlRTUlODclQTYlRTclOTAlODYlRTMlODElQTclRTglQTglOTglRTglQkYlQjAlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWU0NDM1ZTI2YzQ1YjAzMzhlNjAwZDFiN2VlNDM4OTNj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0b3JvbW8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWZlMmM3YWU4ZmRiMDMxYjY2ZTMyMGMzY2EyMmI2MzBl%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D87bdf2ba48f2eb72fc6ec05e43286ad1)