Akses Api Dengan Versi Javascript Modern 🐧

Hallo Kali ini saya akan membuat Project Sederhana akses Api dengan versi code yang lebih clean dan dengan versi javascript yang modern.

Pada project kali ini saya menerapkan beberapa fungsi seperti:

• Promise
• Async Await
• Fetch
• Callback

Yang menarik disini adalah penggunaan Fetch() method yaitu untuk mengambil resources(data), dengan fetch code terlihat lebih clean, powerful dan juga menggunakan promise jadi lebih mudah untuk penggunanya
untuk lebih lanjut bisa buka linknya https://javascript.info/fetch

Contohnya seperti di-link ini https://rahulsya.github.io/warehouse/getApi/

link Repository-nya bisa DiDownload https://github.com/rahulsya/rahulsya.github.io/tree/master/warehouse/getApi

Cukup intronya mari kita buat projectnya

• Persiapan Project

index.html

index.html

*untuk css bisa dicopy atau di download di github saya 😃

Langsung kita buat main.js-nya 😃

Pertama kita get properti class container untuk ,menampilkan hasil request kedalam element container tersebut.

const container=document.querySelector(".container")

Selanjutnya membuat async function dan didalamnya ditambahkan error handler yaitu try dan catch untuk melakukan cek apakah fungsi berhasil atau pun error.

didalam fungsi try buat variabel untuk melakukan request ke api dengan menggukan fetch() dan mengunakan await untuk mendapatkan value dari fungsi yang mengembalikan promise

async function getApi(){
 try {
  let response=await fetch('https://ghibliapi.herokuapp.com/films')
   let result=await response.json()
        return result
    } catch (error) {
        console.log('error');
    }
}

dengan fungsi asyc await kita dapat menggukan promise karna fungsi async mengembalikan promise .

fungsi getApi() dapat langsung kita gunakan.

document.addEventListener('DOMContentLoaded',()=>{
    getApi().then(data=>{
        console.log(data)
    })
//hasilnya menampilkan data object di console 
})

Selanjutnya membuat datanya tampil pada tiap element html. saya buat function display(movies) yang nantinya fungsi ini akan di callback di dalam .then nya getApi().

function display(movies){
    let result=""
    movies.forEach(movie => {
        result+=`
        <div class="card">
            <h1>${movie.title}</h1>
            <p>${movie.description.substring(0,300)}...</p>
        </div>
        `
    });
    container.innerHTML=result
}

pada container.innerHTML nantinya datanya akan diisi didalam element <div class=”container></div>

selanjutnya kita sudah dapat menampilkan datanya pada element html

document.addEventListener('DOMContentLoaded',()=>{
    getApi().then(data=>{
//melakukan callback 
        display(data)
    })
}

tampilannya

Sekian dan terimakasih , share jika ini sangat membantu anda 😃dan mohon maaf jika masih ada kekurangan karna saya saat menulis blog ini masih amatir dan dalam masa belajar belajar dan belajar .

*untuk tampilan css saya menggunakannya dari link berikut

https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/