Beberapa Kesalahan Ketika Mengambil Data di Internet pada React Native

Aplikasi berbasis perangkat bergerak (mobile) hari ini sudah menjadi makanan sehari manusia. Dukungan telepon pintar terhadap internet menyebabkan aplikasi-aplikasi tersebut juga kadang kala dibuat untuk bisa mengambil data dari internet, terutama untuk perangkat yang memang basisnya internet seperti perangkat perpesanan daring, perpetaan, dan lain sebagainya. React Native hadir sebagai solusi bagi pemrogram pemula yang ingin aplikasinya dapat berjalan pada Android dan iOS dengan satu kode.
React Native mendukung fetching data dari internet (dalam hal ini API Server) dengan memanfaatkan promise. Perintah mengambil data tersebut dilakukan dengan cara berikut.
fetch(<URL to fetch>)
.then((response) => ...)
...
.catch((error) => {
})
.done();Dan dalam penggunaannya, ada beberapa hal yang perlu diperhatikan, karena ini menjadi kesalahan umum pemula ketika sedang belajar. Kesalahan-kesalahan ini saya alami ketika pertama belajar React Native.
- Kesalahan 1: Menyimpan hasil di luar promise
Misalnya dengan cara sebagai berikut.
let X;
fetch(<URL to fetch>)
.then((response) => X = response)
...
.catch((error) => {
})
.done();console.log(X); //hasilnya kosong
X dicetak kosong karena X ubah di dalam promise, tetapi saat keluar dari promise, nilanya sudah tidak disimpan lagi. Seharusnya perintah console.log dilakukan bersama dengan pengubahan nilai X. Ini juga berlaku untuk assignment state, dan sebagainya.
- Kesalahan 2: Tidak melakukan pengecekan jaringan sebelum melakukan fetching data
Jika tidak dilakukan pengecekan sambungan jaringan sebelum melakukan fetching, hasil yang diperoleh kosong dan tidak ada upaya untuk menunggu jaringan tersambung kembali. Padahal pengguna biasanya mengharapkan aplikasi akan memuat ulang secara otomatis setelah jaringan tersambung kembali.
Oleh karena itu, sangat penting bagi pengembang untuk mengecek jaringan. Jika tersambung, maka lakukan pengambilan data. Jika tidak, maka upayakan terus untuk mengambil data sampai jaringan tersambung kembali. Ini bisa dilakukan dengan NetInfo.
import {
...
NetInfo,
...
} from react-native;
...
getSomething() {NetInfo.isConnected.fetch().then(isConnected => {
if(isConnected) {
fetch (...)
.then (...)
.catch((e) => {
})
.done();
} else {
this.getSomething();
}
})
}
Dengan demikian, fungsi ini akan mencoba untuk terus berupaya mengambil data sampai jaringan tersambung.
- Kesalahan 3: Tidak mengatasi kemungkinan kesalahan saat mengambil data
Ada kemungkinan ketika jaringan telah tersambung tetapi kembali terputus sebelum selesai fetching data. Akibatnya, fungsi masuk ke state done() dan akan terjadi kesalahan yang tidak tertangani, sehingga aplikasi akan force close. Untuk itu, pada state done() perlu ditambahkan blok penanganannya.
import {
...
NetInfo,
...
} from react-native;
...
getSomething() {NetInfo.isConnected.fetch().then(isConnected => {
if(isConnected) {
fetch (...)
.then (...)
.catch((e) => {
})
.done(() => {
try {
//lakukan sesuatu setelah semua selesai
} catch (error) {
...
this.getSomething();
}
});
} else {
this.getSomething();
}
})
}
Nah, demikian beberapa kesalahan umum pemula dalam menggunakan Networking di React Native. Untuk penjelasan lebih lanjut tentang Networking React Native, silakan kunjungi https://facebook.github.io/react-native/docs/network.html
Semoga bermanfaat!
