Belajar Menggunakan Fetch di Javascript

Solution: Menerapkan Fetch pada Proyek Club Finder

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 deskripsi singkat dalam bahasa inggris.

Lantas untuk mencari data team berdasarkan kata kunci lain kita dapat mengubah kata “Arsenal” menggunakan kata kunci yang kita inginkan, misalnya “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”.

Cukup mudah bukan untuk menggunakan API tersebut?

Nah, Setelah memahami cara penggunaan API-nya, sekarang mari kita mulai tuliskan fungsi fetch pada proyek Club Finder. Langkah awal buka kembali proyek Club Finder pada text editor yang Anda gunakan.

Kemudian buka berkas data-source.js pada src -> script -> data -> data-source.js. Kita refactor fungsi searchClub dengan menghapus seluruh logika yang ada di dalamnya, kemudian tuliskan fungsi fetch seperti 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 sudah kita ketahui, fungsi fetch() akan mengembalikan promise resolve jika request berhasil dilakukan. Maka untuk menangani respon dari request yang dibuat, kita gunakan .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;

Kemudian di dalam blok then tersebut, kita ubah nilai response menjadi 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;

Karena method response.json() juga mengembalikan nilai promise, maka untuk mendapatkan nilai yang dibawa oleh resolve kita perlu menambahkan .then lainnya (chaining promise). 

Di dalam .then yang kedua ini, berikan parameter dengan nama responseJson (penamaan variabel tidaklah baku, namun gunakan 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;

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;

npm run start-dev

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

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 kemudian lakukan pencarian kembali pada aplikasi Club Finder. Seharusnya sekarang aplikasi sudah bisa menampilkan data dengan baik.