Cara Menggunakan API beserta Fetch di dalam Web Sederhana - Edukeun

Edukeun - Sudahkah Anda berhasil menerapkan Ambil untuk menampilkan data dari TheSportDB API? Jika belum, ayo lakukan bersama!

Dokumentasi API menyatakan bahwa untuk mendapatkan daftar klub olahraga, kita dapat menggunakan URL target: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal

Sebelum menggunakan fetch untuk menulis langsung ke proyek, biasakan sebelum Anda ingin menggunakan API. Pertama biasakan untuk mencobanya dengan aplikasi Postman. Jika Anda mengakses url target dengan permintaan GET melalui Postman, ini akan menghasilkan respons dengan struktur JSON yang ditampilkan di tab "Body".

Respons JSON yang dihasilkan berisi kunci bernama Teams, dan nilai kunci tersebut dalam bentuk larik. Larik ini menunjukkan sejumlah besar data yang terkait dengan klub olahraga bernama Arsenal. Kita dapat menggunakan kunci strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat bahasa Inggris.

Kemudian mencari data tim berdasarkan kata kunci lain, kita bisa mengganti kata “Arsenal” dengan menggunakan kata kunci yang kita inginkan, misalnya “Barcelona”. Oleh karena itu, permintaan ke URL: https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Barcelona akan menghasilkan tanggapan JSON dengan informasi klub olahraga yang terkait dengan "Barcelona".

Bukankah mudah menggunakan API tersebut?

Sekarang, setelah mengetahui cara menggunakan API, sekarang mari kita mulai menulis fungsi pengambilan di proyek Club Finder. Langkah pertama adalah membuka kembali proyek Club Finder di editor teks yang Anda gunakan.

Kemudian buka file data-source.js di src-> scripts-> data-> data-source.js. Kami memfaktorkan ulang fungsi searchClub dengan menghapus semua logika di dalamnya, lalu menulis fungsi pengambilan sebagai berikut:

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
   }
}
 
export default DataSource;

Seperti yang kita semua tahu, jika permintaan berhasil, fungsi fetch () akan mengembalikan penyelesaian promise. Oleh karena itu, untuk memproses respon dari permintaan yang dikeluarkan, kita menggunakan .Kemudian (), yang berisi variabel respon sebagai objek respon yang diperoleh.

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
          
       })
   }
}
 
export default DataSource;

Kemudian di blok kemudian, kami mengubah nilai respons menjadi JSON dengan memanggil metode response.json ().

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
           return response.json();
       })
   }
}
 
export default DataSource;

Karena metode response.json () juga mengembalikan nilai Promise, untuk mendapatkan nilai yang dibawa oleh tekad, kita perlu menambahkan .then (Chained Promise) lainnya. Kemudian, pada parameter kedua, beri nama parameter responseJson (nama variabel bukan nama standar, melainkan nama yang merepresentasikan arti dari nilai variabel).

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
           return response.json();
       })
       .then(responseJson => {
          
       })
   }
}
 
export default DataSource;

responseJson adalah nilai JSON, yang dihasilkan dengan mengubah objek respons dalam bentuk JSON melalui metode .json ().

Di blok .then kedua, jika nilai array bukan null, penyelesaian janji dikembalikan dengan membawa nilai jsonResponse.teams. Namun, jika Teams kosong, itu akan mengembalikan nilai penolakan promise dengan nilai "$ {keyword} tidak ditemukan".

class DataSource {
   static searchClub(keyword) {
       return fetch(`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${keyword}`)
       .then(response => {
           return response.json();
       })
       .then(responseJson => {
           if(responseJson.teams) {
               return Promise.resolve(responseJson.teams);
           } else {
               return Promise.reject(`${keyword} is not found`);
           }
       })
   }
}
 
export default DataSource;

Simpan perubahan tersebut dan jalankan aplikasi dalam mode development menggunakan perintah:

npm run start-dev

Setelah membuka proyek, cari menggunakan kata kunci yang Anda inginkan, di sini kami menggunakan "Barcelona".

Nah, data yang ditampilkan tidak pasti. Mengapa demikian? Ini karena kami tidak menyesuaikan kunci berdasarkan respons yang diperoleh dari API publik. Kita harus menggunakan kunci strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa Inggris.

Kami menetapkan tiga kunci ini ke file src-> script-> component-> club-item.js. Lebih tepatnya di fungsi rendering.

render() {
       this.shadowDOM.innerHTML = `
           <style>
                ……..
           </style>
           <img class="fan-art-club" src="${this._club.fanArt}" alt="Fan Art">
           <div class="club-info">
               <h2>${this._club.name}</h2>
               <p>${this._club.description}</p>
           </div>`;
   }

Kami mengubah properti this._club.fanArt menjadi this._club.strTeamBadge, this._club.name menjadi this._club.strTeam, dan this._club.description menjadi this._club.strDescriptionEN.

Jadi fungsi render akan terlihat seperti ini:

render() {
       this.shadowDOM.innerHTML = `
           <style>
               * {
                   margin: 0;
                   padding: 0;
                   box-sizing: border-box;
               }
               :host {
                   display: block;
                   margin-bottom: 18px;
                   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                   border-radius: 10px;
                   overflow: hidden;
               }
              
               .fan-art-club {
                   width: 100%;
                   max-height: 300px;
                   object-fit: cover;
                   object-position: center;
               }
              
               .club-info {
                   padding: 24px;
               }
              
               .club-info > h2 {
                   font-weight: lighter;
               }
              
               .club-info > p {
                   margin-top: 10px;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   display: -webkit-box;
                   -webkit-box-orient: vertical;
                   -webkit-line-clamp: 10; /* number of lines to show */
               }
           </style>
           <img class="fan-art-club" src="${this._club.strTeamBadge}" alt="Fan Art">
           <div class="club-info">
               <h2>${this._club.strTeam}</h2>
               <p>${this._club.strDescriptionEN}</p>
           </div>`;
 }

Simpan perubahan kode yang ditulis lagi, lalu cari lagi di aplikasi Club Finder. Aplikasi sekarang harus dapat menampilkan data dengan benar.

Anda telah berhasil menerapkan Ambil ke proyek Pencari Klub.

Related Posts