Geekly articles weekly

Cara menguasai async / menunggu sintaks: contoh nyata

Berikut ini adalah terjemahan dari artikel oleh Adrian Hajdin, yang diterbitkan di situs web freeCodeCamp. Di bawah kucing, penulis dengan jelas dan ringkas menjelaskan keuntungan async / menunggu, dan menunjukkan pada contoh nyata bagaimana menggunakan sintaks ini.



Perhatikan ...

Saya tidak hanya menulis artikel ini, tetapi juga membuat video di YouTube!

Anda dapat mengikuti instruksi dalam video dan program saat menonton. Saya menyarankan Anda untuk terlebih dahulu membaca artikel dan hanya kemudian menulis kode selama video.

Tautan Video: Pelajari Async / Menunggu dalam Proyek Dunia Nyata ini

Pendahuluan


Async / await adalah cara baru untuk menulis kode asinkron. Sintaks ini dibangun di atas janji dan karenanya tidak memblokir.

Perbedaan dari metode lain untuk membuat kode asinkron adalah dalam penampilan dan perilaku, kode asinkron yang diimplementasikan melalui async / await menyerupai kode sinkron. Dan ini keuntungannya.

Metode sebelumnya untuk mengatur kode asinkron adalah panggilan balik dan janji.

Fungsi Callback Beraksi


setTimeout(() => { console.log('This runs after 1000 milliseconds.'); }, 1000);

Masalah Fungsi Panggilan Balik - Neraka Panggilan Balik yang Buruk


Ketika Anda melampirkan fungsi panggilan balik satu sama lain, kode segera mulai terlihat seperti ini:


Panggilan balik neraka

Panggilan balik neraka

Ini adalah situasi di mana panggilan balik bersarang di panggilan balik lain di beberapa tingkat, sehingga sulit untuk memahami dan mengelola kode.

Janji beraksi


 const promiseFunction = new Promise((resolve, reject) => { const add = (a, b) => a + b; resolve(add(2, 2)); }); promiseFunction.then((response) => { console.log(response); }).catch((error) => { console.log(error); });

Fungsi janji mengembalikan janji yang mewakili proses fungsi ini. Fungsi tekad membuat objek Janji memahami bahwa prosesnya selesai.

Kemudian kita dapat memanggil .then () dan .catch () untuk fungsi janji ini:
lalu - meluncurkan callback yang Anda lewati ketika janji itu selesai.
catch - meluncurkan callback yang Anda lewati ketika terjadi kesalahan.

Fungsi Async


Fungsi async memberi kita sintaksis yang bersih dan ringkas yang memungkinkan kita untuk menulis lebih sedikit kode dan mendapatkan hasil yang sama seperti menggunakan janji. Async tidak lain adalah gula sintaksis untuk janji.

Fungsi Async dibuat dengan menambahkan kata kunci async sebelum deklarasi fungsi, misalnya:

 const asyncFunction = async () => { // Code }

Fungsi asinkron dapat dihentikan sementara dengan menunggu , kata kunci yang hanya digunakan dalam fungsi async . Tunggu mengembalikan semua yang dikembalikan fungsi async saat dijalankan.

Perbedaan antara janji dan async / menunggu:

 // Async/Await const asyncGreeting = async () => 'Greetings'; // Promises const promiseGreeting = () => new Promise(((resolve) => { resolve('Greetings'); })); asyncGreeting().then(result => console.log(result)); promiseGreeting().then(result => console.log(result));

Async / wait adalah seperti kode sinkron, yang jauh lebih mudah dimengerti.

Sekarang kita telah membahas prinsip-prinsip dasar, mari kita beralih ke kasus penggunaan nyata!

Konverter mata uang


Klarifikasi dan kustomisasi proyek


Sekarang kita akan membangun aplikasi yang sederhana namun bermanfaat (termasuk untuk pelatihan) yang akan meningkatkan pengetahuan umum Anda tentang async / menunggu .

Program akan mengambil jumlah uang, kode mata uang dari mana kami ingin mentransfer jumlah ini, dan kode mata uang tempat kami ingin mentransfernya. Program kemudian akan mengeluarkan nilai tukar yang benar berdasarkan data dari API.

Dalam aplikasi ini, kita akan mendapatkan data dari dua sumber asinkron:

  1. Lapisan Mata Uang - https://currencylayer.com - Anda harus mendaftar secara gratis untuk menggunakan kunci akses API. Dia akan memberi kami data yang diperlukan untuk menghitung nilai tukar.
  2. Negara Istirahat - http://restcountries.eu/ - API ini akan memberikan informasi tentang di mana kita dapat menggunakan mata uang tempat kita baru saja mentransfer uang kita.

Pertama-tama, buat folder baru dan jalankan npm init , lewati semua langkah dan instal axios dengan mengetikkan npm i -- save axios . Buat file baru bernama currency-converter.js .

Permintaan aksioma pertama dengan mengetik: const axios = require('axios');

Mari selami async / tunggu


Tujuan kami adalah agar program memiliki tiga fungsi. Bukan satu atau dua, tetapi tiga fungsi asinkron . Fungsi pertama akan menerima data tentang mata uang, yang kedua - tentang negara, dan yang ketiga - untuk mengumpulkan informasi ini di satu tempat dan menampilkannya kepada pengguna dengan cara yang dipesan.

Fungsi pertama adalah penerimaan data mata uang yang tidak sinkron

Kami akan membuat fungsi asinkron yang akan menyertakan dua argumen - fromCurrency dan toCurrency.

 const getExchangeRate = async (fromCurrency, toCurrency) => {}

Sekarang Anda perlu mendapatkan datanya. Menggunakan async / menunggu, Anda dapat menetapkan data langsung ke variabel. Jangan lupa untuk mendaftar dan masukkan kunci pas Anda.

 const getExchangeRate = async (fromCurrency, toCurrency) => { const response = await axios.get('http://data.fixer.io/api/latest? access_key=[yourAccessKey]&format=1'); }

Data dari respons tersedia di response.data.rates , sehingga Anda dapat menyisipkan ekspresi ini ke dalam variabel langsung di bawah respons:

 const rate = response.data.rates;

Karena semuanya dikonversi dari euro, di bawah ini kami akan membuat variabel yang disebut euro, yang akan sama dengan 1 / dari mata uang dari mana kami ingin mentransfer uang:

 const euro = 1 / rate[fromCurrency];

Dan untuk mendapatkan nilai tukar, Anda perlu melipatgandakan euro dengan mata uang yang ingin kami transfer uangnya:

 const exchangeRate = euro * rate[toCurrency];

Akibatnya, fungsinya akan terlihat seperti ini:



Fungsi kedua adalah akuisisi data yang tidak sinkron tentang negara

Kami akan membuat fungsi asinkron yang akan menggunakan currencyCode sebagai argumen:

 const getCountries = async (currencyCode) => {}

Seperti terakhir kali, kita akan mendapatkan data dan menugaskannya ke variabel:

 const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`);

Kemudian kami akan mencocokkan data dan mengembalikan country.name untuk setiap kode mata uang:

 return response.data.map(country => country.name);

Akibatnya, fungsinya akan terlihat seperti ini:



Fungsi ketiga dan terakhir - kami menggabungkan semuanya bersama
Kami akan membuat fungsi asinkron yang akan menyertakan fromCurrency , toCurrency , dan jumlah sebagai argumen:

 const convert = async (fromCurrency, toCurrency, amount) => {}

Pertama kita mendapatkan data mata uang:

 const exchangeRate = await getExchangeRate(fromCurrency, toCurrency);

Lalu data negara:

 const countries = await getCountries(toCurrency);

Setelah itu, simpan jumlah yang dikonversi ke variabel:

 const convertedAmount = (amount * exchangeRate).toFixed(2);

Akibatnya, kami menampilkan semua ini kepada pengguna:

 return `${amount} ${fromCurrency} is worth ${convertedAmount} ${toCurrency}. You can spend these in the following countries: ${countries}`;

Bersama-sama, akan terlihat seperti ini:



Menambahkan pernyataan coba / tangkap untuk menangani kesalahan
Kita perlu membungkus logika kita dengan blok try / catch untuk menangkap kesalahan, jika ada:

 const getExchangeRate = async (fromCurrency, toCurrency) => { try { const response = await axios.get('http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1'); const rate = response.data.rates; const euro = 1 / rate[fromCurrency]; const exchangeRate = euro * rate[toCurrency]; return exchangeRate; } catch (error) { throw new Error(`Unable to get currency ${fromCurrency} and ${toCurrency}`); } };

Lakukan hal yang sama dengan fungsi kedua:

 const getCountries = async (currencyCode) => { try { const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`); return response.data.map(country => country.name); } catch (error) { throw new Error(`Unable to get countries that use ${currencyCode}`); } };

Tidak perlu memeriksa kesalahan fungsi ketiga, karena berfungsi dengan data yang disediakan fungsi pertama dan kedua.

Sebagai hasilnya, kita dapat memanggil fungsi dan mendapatkan data:

 convertCurrency('USD', 'HRK', 20) .then((message) => { console.log(message); }).catch((error) => { console.log(error.message); });

Hasilnya Anda dapatkan:



Itu saja!


Anda telah datang sampai akhir! Jika ada sesuatu yang tidak berhasil dalam proses, Anda dapat menemukan kode sumber di repositori ini. Jika Anda memiliki pertanyaan atau ingin meninggalkan ulasan, tulis komentar . Bagi saya, bantuan terbesar adalah dukungan Anda di YouTube, karena saya baru saja membuat saluran di sana! Klik di sini - segera banyak hal menarik akan muncul di sini! :)

Anda juga dapat menonton tutorial yang saya buat di situs web Mongoose .

Source: https://habr.com/ru/post/id438318/

More articles:


All Articles