Seputar Teknologi Kelautan

Apakah Anda sudah berhasil menerapkan Fetch dalam menampilkan data dari API TheSportDB? Jika belum, yuk kita lakukan bersama-sama! Pada dokumentasi API menyebutkan bahwa, untuk mendapatkan daftar klub olahraga kita dapat menggunakan target url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal Sebelum menuliskan langsung pada proyek dengan fetch, biasakan ketika hendak mengkonsumsi API biasakan untuk mencobanya menggunakan aplikasi Postman terlebih dahulu. Jika target url tersebut diakses melalui Postman dengan GET Request, maka akan menghasilkan response dengan struktur JSON yang tampak pada  tab Body . Pada response JSON yang dihasilkan menampung satu  key  dengan nama  teams  yang memiliki  value  berupa sebuah array. Di dalam array tersebut menampilkan banyak data terkait klub olahraga yang memiliki nama Arsenal. Kita dapat memanfaatkan key  strTeam  untuk mendapatkan nama klub,  strTeamBadge  untuk mendapatkan logo klub, dan  strDescriptionEN  untuk mendapatkan d

Seperti yang sudah kita ketahui, fetch memanfaatkan promise dalam melakukan tugasnya, sehingga network request yang dibuat menggunakan fetch akan selalu berjalan  asynchronous . Penggunaan dasar dari  fetch  tampak seperti ini: Network request dilakukan pada saat fungsi  fetch()  tereksekusi. fetch ( "https://web-server-book-dicoding.appspot.com/list" ) Jika request berhasil diproses oleh server, fungsi  fetch()  akan mengembalikan  promise resolve  dan membawa  response  object di dalamnya. Namun nilai  response  yang dibawa  resolve  belum sebagai data JSON yang kita butuhkan, melainkan informasi mengenai  response  itu sendiri, seperti  status code ,  target url ,  headers , dsb. Maka dari itu, untuk mendapatkan data JSON yang dibutuhkan, kita perlu mengubah response object ke dalam bentuk JSON dengan memanggil method  .json() . fetch ( "https://web-server-book-dicoding.appspot.com/list" )   . then ( response => {     return  response . json ();   }) Method