NodeJS Axios

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy
● Technical architect at one of the biggest
ecommerce company in Indonesia
● 13+ years experiences
● [Link]
● [Link]/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Linkedin : [Link]
● Facebook : [Link]/ProgrammerZamanNow
● Instagram : [Link]/programmerzamannow
● Youtube : [Link]/c/ProgrammerZamanNow
● Telegram Channel : [Link]/ProgrammerZamanNow
● Tiktok : [Link]
● Email : [Link]@[Link]
Sebelum Belajar
● Kelas JavaScript dari Programmer Zaman Now
● Kelas NodeJS Dasar
● Kelas NodeJS NPM
Pengenalan Axios
NodeJS HTTP Module
● Untuk melakukan HTTP Client, biasanya di NodeJS kita bisa menggunakan
HTTP Module
● [Link]
● Namun, cara penggunaannya kurang terlalu developer friendly, dan masih
menggunakan callback (tidak menggunakan promise)
Pengenalan Axios
● Axios adalah alternatif lain sebagai library untuk HTTP Client
● Axios bisa berjalan di NodeJS, bahkan bisa digunakan di Web Browser
● API Axios menggunakan promise, sehingga mudah untuk digunakan
dibandingkan NodeJS HTTP Module yang masih menggunakan callback
● [Link]
● [Link]
Membuat Project
Membuat Project
● Buatlah folder dengan nama belajar-nodejs-axios
● npm init
● Ubah type di [Link] menjadi module
Menambah Package Jest
● npm install --save-dev jest @types/jest
● [Link]
Menambah Package Axios
● npm install axios
● [Link]
Menambah Library Babel
● npm install --save-dev babel-jest @babel/preset-env
● [Link]
HTTP Client
HTTP Client
● Hal pertama yang perlu kita lakukan untuk menggunakan Axios adalah membuat
HTTP Client
● Untuk membuat HTTP Client, kita bisa menggunakan object Axios di
menggunakan create function di package axios
Kode : HTTP Client
Request Config
● Saat kita membuat object Axios, kita bisa menggunakan default Request Config
● Default Request Config adalah konfigurasi default yang akan digunakan ketika
membuat HTTP Request
● [Link]
Kode : Request Config
HTTP Method
HTTP Method
● Axios adalah library untuk HTTP Client, oleh karena itu pastinya kita gunakan
untuk melakukan HTTP Request
● Ketika melakukan HTTP Request, kita pasti akan menentukan HTTP Method
yang akan kita gunakan
● Axios menggunakan nama method sebagai HTTP Method nya
● Kita bisa menggunakan nama-nama method sesuai dengan jenis HTTP Method
dalam lowercase pada object Axios
● [Link]
Kode : HTTP Get
HTTP Request
HTTP Request
● Seperti yang dijelaskan di materi sebelumnya, untuk melakukan HTTP Request,
kita bisa gunakan nama method yang sesuai dengan jenis HTTP Method yang
ingin kita gunakan
● Selain itu, kita bisa menggunakan Request Config pada parameter di method yang
kita gunakan
● [Link]
● [Link]
Kode : HTTP Request
HTTP Response
HTTP Response
● Setiap HTTP Request yang kita lakukan, maka akan mengembalikan
Promise<Response>
● Response merupakan representasi dari HTTP Response
● [Link]
Kode : HTTP Response
Request Body
Request Body
● Beberapa jenis HTTP Method seperti POST, PUT dan PATCH bisa memiliki
Request Body
● Untuk informasi Request Body yang kita kirim, kita bisa kirim dalam parameter
data di object Axios
● [Link]
Kode : JSON Request Body
Kode : Text Request Body
Kode : Form Request Body
Kode : Multipart Request Body
Request Interceptor
Request Interceptor
● Kadang, kita ingin melakukan sesuatu sebelum HTTP Request di kirim ke Server
● Axios memiliki fitur bernama Request Interceptor
● Ini adalah fitur yang bisa kita gunakan untuk melakukan sesuatu sebelum HTTP
Request dikirim
● Kita bisa tentukan sebelum request dikirim, bahkan ketika error terjadi tapi
request belum dikirim
Kode : Request Interceptor
Response Interceptor
Response Interceptor
● Selain Request Interceptor, kita juga bisa tambahkan Response Interceptor
● Cara kerjanya sama, bedanya Interceptor ini digunakan setelah menerima HTTP
Response
Kode : Response Interceptor
Error Handler
Error Handler
● Secara default, ketika terjadi error di HTTP Request atau HTTP Response, Axios
akan mengembalikan Promise Reject, oleh karena itu untuk menangani Error di
Axios, cukup mudah
● Bisa menggunakan catch di Promise, atau gunakan try catch jika menggunakan
async await
● Secara default, jika terjadi error, Axios akan mengembalikan object error
AxiosError
● [Link]
Kode : Axios Error
Menentukan Error Status Code
● Secara default, jika HTTP Response status code bukan 2xx, maka Axios akan
menganggap itu error
● Jika kita ingin mengubah penentuan status code mana yang dianggap error, maka
kita perlu menambahkan validateStatus di RequestConfig
Kode : Validate Status
Penutup