Contoh Memakai API Dan Fetch di dalam Web Sederhana

DAFTAR ISI
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
2020031323502200000abb4fd3bf7637506d2872ff1cb0.png
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.
202003132350321a588cd4b3f0285be6fd1af52fa3591e.png
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”.
20200313235048e7906db6f58df01a750d175c26f3b342.png
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.
202003132351017c49f82cb83c52af812adb0b076cc23f.png
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:

  1. class DataSource {

  2.    static searchClub(keyword) {

  3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

  4.    }

  5. }

  6.  

  7. export default DataSource;


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.

  1. class DataSource {

  2.    static searchClub(keyword) {

  3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

  4.        .then(response => {

  5.           

  6.        })

  7.    }

  8. }

  9.  

  10. export default DataSource;


Lalu di dalam blok then itu, kita ubah nilai response jadi JSON dengan memanggil method response.json().

  1. class DataSource {

  2.    static searchClub(keyword) {

  3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

  4.        .then(response => {

  5.            return response.json();

  6.        })

  7.    }

  8. }

  9.  

  10. export default DataSource;


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).

  1. class DataSource {

  2.    static searchClub(keyword) {

  3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

  4.        .then(response => {

  5.            return response.json();

  6.        })

  7.        .then(responseJson => {

  8.           

  9.        })

  10.    }

  11. }

  12.  

  13. export default DataSource;


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”.

  1. class DataSource {

  2.    static searchClub(keyword) {

  3.        return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)

  4.        .then(response => {

  5.            return response.json();

  6.        })

  7.        .then(responseJson => {

  8.            if(responseJson.teams) {

  9.                return Promise.resolve(responseJson.teams);

  10.            } else {

  11.                return Promise.reject(`${keyword} is not found`);

  12.            }

  13.        })

  14.    }

  15. }

  16.  

  17. export default DataSource;


Simpan perubahan itu dan jalankan aplikasi dalam mode development memakai perintah:

  1. npm run start-dev


Sesudah proyek terbuka, lakukan pencarian dengan keyword apapun yang Kamu ingin, di sini kita contohkan dengan “Barcelona”.
20200313235133e90126ea84a6df29dc44b91c4f296331.png
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.

  1. render() {

  2.        this.shadowDOM.innerHTML = `

  3.            <style>

  4.                 ……..

  5.            </style>

  6.            <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">

  7.            <div class="club-info">

  8.                <h2>${this._club.name}</h2>

  9.                <p>${this._club.description}</p>

  10.            </div>`;

  11.    }


Kita ubah properti this._club.fanArt jadi this._club.strTeamBadgethis._club.name jadi this._club.strTeam, dan this._club.description jadi this._club.strDescriptionEN.
Sehingga fungsi render akan jadi semacam ini:

  1. render() {

  2.        this.shadowDOM.innerHTML = `

  3.            <style>

  4.                * {

  5.                    margin: 0;

  6.                    padding: 0;

  7.                    box-sizing: border-box;

  8.                }

  9.                :host {

  10.                    display: block;

  11.                    margin-bottom: 18px;

  12.                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  13.                    border-radius: 10px;

  14.                    overflow: hidden;

  15.                }

  16.               

  17.                .fan-art-club {

  18.                    width: 100%;

  19.                    max-height: 300px;

  20.                    object-fit: cover;

  21.                    object-position: center;

  22.                }

  23.               

  24.                .club-info {

  25.                    padding: 24px;

  26.                }

  27.               

  28.                .club-info > h2 {

  29.                    font-weight: lighter;

  30.                }

  31.               

  32.                .club-info > p {

  33.                    margin-top: 10px;

  34.                    overflow: hidden;

  35.                    text-overflow: ellipsis;

  36.                    display: -webkit-box;

  37.                    -webkit-box-orient: vertical;

  38.                    -webkit-line-clamp: 10; /* number of lines to show */

  39.                }

  40.            </style>

  41.            <img class="fan-art-club" src="${this._club.strTeamBadge}" alt="Fan Art">

  42.            <div class="club-info">

  43.                <h2>${this._club.strTeam}</h2>

  44.                <p>${this._club.strDescriptionEN}</p>

  45.            </div>`;

  46. }


Simpan kembali perubahan kode yang dituliskan lalu lakukan pencarian kembali pada aplikasi Club Finder. Semestinya sekarang aplikasi telah dapat menampilkan data dengan bagus.
202003132351502bc06712f0552fa6f26e8f8de5607033.png
Voila! Kamu telah berhasil menerapkan Fetch pada proyek Club Finder.
Baca Juga:  Akun Twitter Presiden Jokowi Ngetweet Soal JKT48, Bikin Netizen Bingung

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Programmer Indonesia
Programmer Indonesia
Admin yang mengelola konten khusus berita. Kalau ada yang ingin diinfokan langsung chat aja ya :D
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
WhatsApp chat