Apakah Kamu telah berhasil menerapkan Fetch dalam menampilkan data dari API TheSportDB? Bila belum, ayo kita lakukan bersama-sama!
Pada dokumentasi API mengungkapkan bahwa, agar mendapatkan daftar klub olahraga kita bisa memakai target url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal
Sebelum menuliskan langsung di proyek dengan fetch, biasakan saat akan mengonsumsi API biasakan untuk mencobanya memakai aplikasi Postman terlebih dulu. Bila target url itu diakses lewat Postman dengan GET Request, maka akan menghasilkan response dengan struktur JSON yang terlihat pada tab Body.
Pada response JSON yang dihasilkan menampung satu key dengan nama teams yang mempunyai value berupa sebuah array. Di dalam array itu menampilkan banyak data terkait klub olahraga yang mempunyai nama Arsenal. Kita bisa memanfaatkan key strTeam agar mendapatkan nama klub, strTeamBadge agar mendapatkan logo klub, dan strDescriptionEN agar mendapatkan penjelasan singkat dalam bahasa inggris.
Lantas untuk mencari data team berdasarkan kata kunci lain kita bisa merubah kata “Arsenal” memakai kata kunci yang kita harapkan, contohnya “Barcelona”. Sehingga melakukan request terhadap url: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Barcelona akan menghasilkan response JSON dengan informasi klub olahraga terkait “Barcelona”.
Relatif mudah bukan untuk memakai API itu?
Nah, Sesudah memahami cara pemakaian API-nya, sekarang ayo kita mulai tuliskan fungsi fetch pada proyek Club Finder. Tahap pertama buka kembali proyek Club Finder pada text editor yang Kamu pakai.
Lalu buka berkas data-source.js pada src -> script -> data -> data-source.js. Kita refactor fungsi searchClub dengan menghapus semua logika yang terdapat di dalamnya, kemudian tuliskan fungsi fetch semacam ini:
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">class</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">static</span><span style="box-sizing: border-box; color: black;"> searchClub</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">keyword</span><span style="box-sizing: border-box; color: #666600;">)</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> fetch</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: #008800;">`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`</span><span style="box-sizing: border-box; color: #666600;">)</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">export</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">default</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /></ol><br />Seperti yang telah kita ketahui, fungsi fetch() akan mengembalikan promise resolve bila request berhasil dilakukan. Jadi untuk menangani respon dari request yang dibuat, kita pakai .then() yang di dalamnya berisi variabel response sebagai response object yang didapat.
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">class</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">static</span><span style="box-sizing: border-box; color: black;"> searchClub</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">keyword</span><span style="box-sizing: border-box; color: #666600;">)</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> fetch</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: #008800;">`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`</span><span style="box-sizing: border-box; color: #666600;">)</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: #000088;">then</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">response </span><span style="box-sizing: border-box; color: #666600;">=></span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">})</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #000088;">export</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">default</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /></ol><br />Lalu di dalam blok then itu, kita ubah nilai response jadi JSON dengan memanggil method response.json().
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">class</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">static</span><span style="box-sizing: border-box; color: black;"> searchClub</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">keyword</span><span style="box-sizing: border-box; color: #666600;">)</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> fetch</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: #008800;">`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`</span><span style="box-sizing: border-box; color: #666600;">)</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: #000088;">then</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">response </span><span style="box-sizing: border-box; color: #666600;">=></span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> response</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">json</span><span style="box-sizing: border-box; color: #666600;">();</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">})</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #000088;">export</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">default</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /></ol><br />Sebab method response.json() juga mengembalikan nilai promise, jadi untuk mendapatkan nilai yang dibawa oleh resolve kita harus menambahkan .then lainnya (chaining promise). Di dalam .then yang kedua ini, berikan patokan dengan nama responseJson (penamaan variabel tidaklah baku, tetapi pakai penamaan yang menunjukkan arti dari nilai variabelnya).
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">class</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">static</span><span style="box-sizing: border-box; color: black;"> searchClub</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">keyword</span><span style="box-sizing: border-box; color: #666600;">)</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> fetch</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: #008800;">`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`</span><span style="box-sizing: border-box; color: #666600;">)</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: #000088;">then</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">response </span><span style="box-sizing: border-box; color: #666600;">=></span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> response</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">json</span><span style="box-sizing: border-box; color: #666600;">();</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">})</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: #000088;">then</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">responseJson </span><span style="box-sizing: border-box; color: #666600;">=></span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">})</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">export</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">default</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /></ol><br />responseJson merupakan nilai JSON yang dihasilkan dari perubahan object response dalam wujud JSON melalui method .json() tadi.
Di dalam block .then yang kedua, kita kembalikan (return) dengan nilai promise resolve dengan membawa nilai jsonResponse.teams bila nilai array tidak null. Tetapi bila teams bernilai null, maka kembalikan dengan nilai promise reject dengan membawa nilai “${keyword} is not found”.
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">class</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">static</span><span style="box-sizing: border-box; color: black;"> searchClub</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">keyword</span><span style="box-sizing: border-box; color: #666600;">)</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> fetch</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: #008800;">`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`</span><span style="box-sizing: border-box; color: #666600;">)</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: #000088;">then</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">response </span><span style="box-sizing: border-box; color: #666600;">=></span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> response</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">json</span><span style="box-sizing: border-box; color: #666600;">();</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">})</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: #000088;">then</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">responseJson </span><span style="box-sizing: border-box; color: #666600;">=></span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">if</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">responseJson</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">teams</span><span style="box-sizing: border-box; color: #666600;">)</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">Promise</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">resolve</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: black;">responseJson</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">teams</span><span style="box-sizing: border-box; color: #666600;">);</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">else</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">return</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">Promise</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">reject</span><span style="box-sizing: border-box; color: #666600;">(</span><span style="box-sizing: border-box; color: #008800;">`${keyword} is not found`</span><span style="box-sizing: border-box; color: #666600;">);</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">})</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #666600;">}</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #000088;">export</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">default</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #660066;">DataSource</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /></ol><br />Simpan perubahan itu dan jalankan aplikasi dalam mode development memakai perintah:
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;">npm run start</span><span style="box-sizing: border-box; color: #666600;">-</span><span style="box-sizing: border-box; color: black;">dev</span></li><br /></ol><br />Sesudah proyek terbuka, lakukan pencarian dengan keyword apapun yang Kamu ingin, di sini kita contohkan dengan “Barcelona”.
Yah, data yang ditampilkan undefined. Kenapa bisa demikian? Ini dikarenakan sebab kita belum menyesuaikan key berdasarkan response yang didapat dari public API. Kita perlu memakai key strTeam agar mendapatkan nama klub, strTeamBadge agar mendapatkan logo klub, dan strDescriptionEN agar mendapatkan penjelasan singkat dalam bahasa inggris.
Ketiga key itu kita tetapkan pada berkas src -> script -> component -> club-item.js. Lebih tepatnya pada fungsi render.
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;">render</span><span style="box-sizing: border-box; color: #666600;">()</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">this</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">shadowDOM</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">innerHTML </span><span style="box-sizing: border-box; color: #666600;">=</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #008800;">`</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <style></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> ……..</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> </style></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art"></span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <div class="club-info"></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <h2>${this._club.name}</h2></span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <p>${this._club.description}</p></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> </div>`</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /></ol><br />Kita ubah properti this._club.fanArt jadi this._club.strTeamBadge, this._club.name jadi this._club.strTeam, dan this._club.description jadi this._club.strDescriptionEN.
Sehingga fungsi render akan jadi semacam ini:
Block Code Snippet
Code
<ol style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;">render</span><span style="box-sizing: border-box; color: #666600;">()</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">{</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #000088;">this</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">shadowDOM</span><span style="box-sizing: border-box; color: #666600;">.</span><span style="box-sizing: border-box; color: black;">innerHTML </span><span style="box-sizing: border-box; color: #666600;">=</span><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #008800;">`</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <style></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> * {</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> margin: 0;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> padding: 0;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> box-sizing: border-box;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> }</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> :host {</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> display: block;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> margin-bottom: 18px;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> border-radius: 10px;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> overflow: hidden;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> }</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> </span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> .fan-art-club {</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> width: 100%;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> max-height: 300px;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> object-fit: cover;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> object-position: center;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> }</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> </span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> .club-info {</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> padding: 24px;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> }</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> </span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> .club-info > h2 {</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> font-weight: lighter;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> }</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> </span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> .club-info > p {</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> margin-top: 10px;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> overflow: hidden;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> text-overflow: ellipsis;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> display: -webkit-box;</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> -webkit-box-orient: vertical;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> -webkit-line-clamp: 10; /* number of lines to show */</span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> }</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> </style></span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <img class="fan-art-club" src="${this._club.strTeamBadge}" alt="Fan Art"></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <div class="club-info"></span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <h2>${this._club.strTeam}</h2></span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: #008800;"> <p>${this._club.strDescriptionEN}</p></span></li><br /><li style="background: rgb(255, 255, 255); box-sizing: border-box;"><span style="box-sizing: border-box; color: #008800;"> </div>`</span><span style="box-sizing: border-box; color: #666600;">;</span></li><br /><li style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span style="box-sizing: border-box; color: black;"> </span><span style="box-sizing: border-box; color: #666600;">}</span></li><br /></ol><br />Simpan kembali perubahan kode yang dituliskan lalu lakukan pencarian kembali pada aplikasi Club Finder. Semestinya sekarang aplikasi telah dapat menampilkan data dengan bagus.
Voila! Kamu telah berhasil menerapkan Fetch pada proyek Club Finder.
Menangani Error, Loading State, dan AbortController pada Fetch
Fetch tidak melempar error otomatis saat respons HTTP mengembalikan status 404 atau 500. fetch() hanya menolak promise ketika terjadi kegagalan jaringan, seperti DNS gagal atau koneksi terputus. Untuk itu, selalu periksa properti response.ok sebelum memproses data. Jika response.ok bernilai false, lempar new Error('HTTP error ' + response.status). Pada kasus TheSportDB, kesalahan umum seperti API key tidak valid atau kuota harian habis tetap menghasilkan respons HTTP 200 dengan struktur JSON berbeda. Maka cek juga bentuk payload: pastikan data.teams ada dan berupa array menggunakan Array.isArray(data.teams) sebelum iterasi. Tanpa validasi ini, kode akan diam-diam gagal saat struktur API berubah.
Loading state wajib ditambahkan agar antarmuka tidak tampak beku saat request berjalan. Set variabel boolean isLoading menjadi true sebelum memanggil fetch, lalu ubah menjadi false di blok finally. Ini menjamin state selalu direset baik sukses maupun error. Tampilkan elemen indikator seperti teks “Memuat data…” atau spinner saat isLoading bernilai true. Selain itu, nonaktifkan tombol pencarian selama proses berlangsung untuk mencegah request ganda yang tidak perlu. Pola ini sederhana namun krusial dalam aplikasi web sederhana yang mengonsumsi API eksternal.
Race condition adalah masalah nyata saat pengguna mengganti kata kunci dengan cepat. Request pertama untuk “Arsenal” bisa selesai setelah request kedua untuk “Barcelona”, sehingga data yang dirender tidak sesuai dengan input terakhir. Solusinya gunakan AbortController. Buat satu controller baru di setiap permulaan fetch, simpan signal-nya, dan panggil abort() sebelum memulai request baru. Saat request dibatalkan, fetch menolak promise dengan AbortError. Tangkap error tersebut di blok catch dan abaikan jika error.name === 'AbortError'. Dengan begitu, hanya respons dari request terbaru yang diproses dan dirender.
Terakhir, jangan pernah menganggap respons API selalu sempurna. Bungkus seluruh logika fetch dalam try-catch-finally. Di blok catch, tampilkan pesan error yang ramah pengguna, misalnya “Gagal memuat data. Periksa koneksi internet.” Simpan detail teknis ke konsol untuk debugging. Di blok finally, matikan loading state. Kombinasi response.ok, validasi struktur, AbortController, dan try-catch-finally membuat kode fetch Anda tangguh terhadap kondisi jaringan buruk, perubahan API, dan interaksi pengguna yang cepat. Ini bukan opsional, melainkan standar minimum untuk aplikasi web yang mengonsumsi API publik.
Hal yang sering ditanyakan seputar Contoh Memakai API dan Fetch di Web Sederhana
Bagaimana cara mengambil data dari API TheSportDB menggunakan fetch?
Gunakan `fetch()` dengan URL endpoint API, misalnya `https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal`. Hasilnya berupa Promise yang harus di-resolve dengan `.then()` untuk mendapatkan JSON response. Akses data dari key `teams` pada response, lalu iterasi array untuk menampilkan field seperti `strTeam`, `strTeamBadge`, atau `strDescriptionEN`.
Mengapa disarankan mencoba API dengan Postman sebelum menggunakan fetch?
Postman memungkinkan melihat struktur response JSON secara langsung tanpa menulis kode. Dari situ bisa dipahami key apa saja yang tersedia, tipe data, dan path aksesnya. Setelah memahami struktur response, implementasi fetch menjadi lebih mudah karena sudah tahu field mana yang perlu diakses.
Bagaimana cara mencari data klub selain Arsenal?
Ganti parameter `t=` pada URL endpoint dengan kata kunci yang diinginkan. Contoh: untuk Barcelona gunakan `searchteams.php?t=Barcelona`, untuk Manchester United gunakan `searchteams.php?t=Manchester%20United`. Spasi dalam kata kunci harus di-encode menjadi `%20`.
Field apa saja yang tersedia pada response API TheSportDB?
Response berisi key `teams` berupa array of objects. Setiap object memiliki banyak field, termasuk `strTeam` (nama klub), `strTeamBadge` (URL logo), `strDescriptionEN` (deskripsi bahasa Inggris), `strStadium` (nama stadion), `strLeague` (liga), `strCountry`, dan masih banyak lagi field terkait klub olahraga.
Apa langkah pertama sebelum memulai proyek yang mengonsumsi API?
Baca dokumentasi API untuk memahami endpoint, parameter, dan struktur response yang tersedia. Uji endpoint menggunakan Postman dengan GET Request untuk memvalidasi bahwa API berfungsi dan memahami isi response. Setelah itu baru implementasikan fetch di kode proyek.
Komentar
Memuat komentar…