Beberapa Kesalahan Ketika Mengambil Data di Internet pada React Native

Ikhwanul Muslimin
Jul 20, 2017 · 2 min read
https://www.novoda.com/blog/content/images/2016/06/reactive-nativingitup-png-800x600_q96.png

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!

SkyshiDigital

)

Ikhwanul Muslimin

Written by

SkyshiDigital

We help scale up your startup to the next level

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade