Asynchronous Request via Axios

Prologue

Komunikasi antar service dilakukan secara stateless karena dikontrol oleh token JWT yang diterapkan dengan metode bearer token. Sehingga setiap request harus menempelkan authorization header kedalam request agar bisa diproses oleh backend.

Asking Request to Self (1st Party)

Untuk komunikasi api kedalam backend dari service gateway sendiri (Misalkan anda bekerja di GWC dan ingin mengambil data user dari GWC sendiri), hal ini dilakukan dengan menggunakan axios request seperti biasa karena autentikasi dilakukan oleh tools Laravel sendiri secara statefull (Lihat Dokumentasi Laravel) dan hal ini sudah kami setting jadi anda tidak perlu khawatir 😄

Anda bisa menggunakan route name seperti yang laravel gunakan (direkomendasikan 😄) dengan import ziggy-js, atau dengan URL.

// Menggunakan ziggy-js (Yang kami rekomendasikan)
import { route } from 'ziggy-js';
axios.get(route('nama.route', ['optionalQueryParameter']))
    .then()
    .catch()
    .finally();

// Menggunakan URL
axios.get('/url/tujuan/query1KalauAda')
    .then()
    .catch()
    .finally();

Across Service Request (2nd Party)

Kami telah membuatkan anda class khusus yang memanfaatkan axios instance untuk mengelola request ke service. Class tersebut adalah RequestInstance.js yang bisa anda cari di folder Mixins.

Dalam implementasinya di template, yang anda pakai adalah object yang sudah kami inisiasi dan disimpan dalam Request.js. Setiap object pasti memiliki nama dengan format <projectCode>Request seperti srfRequest, pnrRequest, dan lain sebagainnya. Namun sebelum menggunakan, anda perlu menuliskan dengan URL apa anda melakukan serve untuk project terkait. Silahkan cari di .env baris URL_<projecCode> lalu isi URL anda. Contoh:

# Pada awalnya biasanya kosong
URL_SRF= 

# Silahkan isi dengan address serve seperti berikut
URL_PNR="127.0.0.1:10300"

Dengan menggunakan object dari class ini, anda tidak perlu memikirkan soal autentikasi sama sekali karena kami sudah mendesain agar ketika request menerima 401 maka akan class akan mencoba meminta token terlebih dahulu via Axios interceptor.

API Docs

Anda tidak perlu menggunakan semua methods, karena beberapa methods memang didesain untuk penggunaan internal (maaf JS Class tidak menerapkan encapsulation). Berikut adalah methods yang bisa anda pakai:

setBody()

Mengatur request body yang akan dikirim ke server.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
data	Object	Required	Request body (payload) yang akan dikirim ke server
asFormData	Boolean	false	Default data akan dikirim sebagai JSON, namun apabila ini true maka data akan dikirim sebagai Form Data

Return: RequestInstance

setHeader()

Mengatur 1 (satu) item header di dalam request.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
key	String	Required	Nama key dari item header
value	String	Required	Isi dari item header

Return: RequestInstance

setHeaders()

Mengatur banyak item header di dalam request.

NOTE

Note apabila sudah ada key yang sama di dalam header, maka value akan ditimpa dengan yang baru.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
objHeader	Object	Required	Pasangan key-value yang akan dimasukkan ke dalam header.

Return: RequestInstance

setUrlParam()

Mengatur 1 (satu) url parameter yang akan ditempel pada url.

Contoh: https: //abc.com/{query}/page?param1=hehe&param2=haha. param1 dan param2 adalah URL Parameter, hehe dan haha adalah value dari parameter dimana hehe value dari param1 dan haha value dari param2.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
key	String	Required	Nama key dari item URL Parameter
value	String	Required	Isi dari item URL Parameter

Return: RequestInstance

setUrlParams()

Mengatur banyak url parameter yang akan ditempel pada url.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
paramsObj	Object	Required	Pasangan key-value yang akan dimasukkan ke dalam header.

Return: RequestInstance

get()

Melakukan eksekusi request secara GET dengan semua pengaturan yang telah dibuat.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
routeName	String	Required	Nama route sesuai dengan pengaturan Laravel. (Penjelasan dibawah 😄)
routeParam	Object	NULL	Bagian dari URL path yang bisa berubah sesuai value. Value harus sesuai dengan mapping yang ada di url. (Penjelasan dibawah 😄)

Return: Promise<axios.AxiosResponse<any>>

post()

Melakukan eksekusi request secara POST dengan semua pengaturan yang telah dibuat.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
routeName	String	Required	Nama route sesuai dengan pengaturan Laravel. (Penjelasan dibawah 😄)
routeParam	Object	NULL	Bagian dari URL path yang bisa berubah sesuai value. Value harus sesuai dengan mapping yang ada di url. (Penjelasan dibawah 😄)

Return: Promise<axios.AxiosResponse<any>>

put()

Melakukan eksekusi request secara PUT dengan semua pengaturan yang telah dibuat.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
routeName	String	Required	Nama route sesuai dengan pengaturan Laravel. (Penjelasan dibawah 😄)
routeParam	Object	NULL	Bagian dari URL path yang bisa berubah sesuai value. Value harus sesuai dengan mapping yang ada di url. (Penjelasan dibawah 😄)

Return: Promise<axios.AxiosResponse<any>>

patch()

Melakukan eksekusi request secara PATCH dengan semua pengaturan yang telah dibuat.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
routeName	String	Required	Nama route sesuai dengan pengaturan Laravel. (Penjelasan dibawah 😄)
routeParam	Object	NULL	Bagian dari URL path yang bisa berubah sesuai value. Value harus sesuai dengan mapping yang ada di url. (Penjelasan dibawah 😄)

Return: Promise<axios.AxiosResponse<any>>

delete()

Melakukan eksekusi request secara DELETE dengan semua pengaturan yang telah dibuat.

Parameter:

Nama Parameter	Tipe Data	Required/Default	Deskripsi
routeName	String	Required	Nama route sesuai dengan pengaturan Laravel. (Penjelasan dibawah 😄)
routeParam	Object	NULL	Bagian dari URL path yang bisa berubah sesuai value. Value harus sesuai dengan mapping yang ada di url. (Penjelasan dibawah 😄)

Return: Promise<axios.AxiosResponse<any>>

Route Things

Apabila anda di Vue mengenal Route Name kami menerapkan sistem yang sama seperti itu. Namun bedanya, route disini dikelola oleh Laravel dan service gateway menyimpan kamusnya.

url.json

File inilah yang menjadi kamus dari setiap route antar service. Setiap gateway pasti menyimpan file kamus sesuai dengan codename dari service seperti srf.json untuk kamus routing service sertifikasi, pnr.json untuk kamus routing service penerimaan, dst.

Setiap kamus terdiri atas 5 root object sesuai dengan RESTful methods: get, post, put, patch, dan delete. Setiap root object tersusun atas object lagi dengan key yang menjadi routeName dan valuenya adalah URL.

Contoh:

{
    "get": {
        "urlPath1": "/hello/world",
        "urlPath2": "/hello/world/{withParam}"
    },
    "post": {
        "path1": "/hello/{withParam}/{withOptionalParam?}"
    }
}

Dari contoh diatas, yang anda tulis di parameter routeName ketika memanggil get(), post(), dll adalah key dari url tersebut. Semisal anda ingin hit /hello/world, note bahwa itu masuk di dalam get, maka anda menggunakan.

pnrRequest.get('urlPath1');

Ketika bekerja di gateway, tugas anda hanya menerima jadi kamus ini dari yang bekerja di backend setiap service. Namun apabila anda belum mendapatkan update terbaru, silahkan hit endpoint /devjson untuk mendapatkan kamus lengkap dari project tersebut (hanya berlaku di environment local).

TIP

Contoh Penggunaan: Anda belum mendapatkan kamus terbaru untuk service penerimaan. Yang anda lakukan adalah silahkan pull latest update dari service penerimaan, jalankan servicenya dengan command php artisan serve. Lalu hit endpoint http://127.0.0.1:10300/devjson untuk mendapatkan kamus terbaru. Dan paste responsenya ke dalam file pnr.json.

Route Parameter

Dari contoh url.json diatas, perhatikan get.urlPath1 dan post.path1. Di url terdapat string dengan kurung kurawal, itulah yang disebut dengan route parameter.

Route parameter bisa required atau opsional, dan ini ditentukan dengan ada tidaknya tanda tanya (?) di akhir nama route parameter. Dari post.path1 berarti ada 2 route parameter:

• withParam adalah parameter required, apabila anda tidak memasukkan nilai disini maka kemungkinan besar akan terjadi error 404 ketika melakukan request.
• withOptionalParam adalah parameter opsional karena ada tanda tanya di akhir dari parameter name, apabila anda melewatkan nilai ini seharusnya request tetap bisa dijalankan.

Untuk mengisi parameter, anda perlu membuat Object dengan nama key sama persis dengan nama route (harus sama, apabila tidak sama maka mapping akan gagal). Contoh dengan post.path1

// Tanpa optional param
pnrRequest
    .setBody({})
    .post('path1', {
        withParam: 'nilainya'
    }) // Seharusnya work like a charm menjadi "/hello/world/nilainya" :D
    .then() // Karena return Promise AxiosResponse, maka bisa dihandle seperti biasa
    .catch()
    .finally();

// Dengan optional param
pnrRequest.setBody({}).post('path1', {
    withParam: 'nilainya',
    withOptionalParam: 'xyz'
}); // Seharusnya work like a charm menjadi "/hello/world/nilainya/xyz" :D

// Contoh salah
pnrRequest.setBody({}).post('path1', {
    withOptionalParam: 'nilainya'
}); // Request gagal karena tidak ada nilai untuk `withParam`. URL yang terbentuk "/hello/world//nilainya"

// Contoh yang ngga terlalu guna :"D
pnrRequest.setBody({}).post('path1', {
    withParam: 'nilainya',
    akuNulisNgawur: '123' // Untuk ini ya percuma, karena ngga akan map kemanapun :D
}); // Seharusnya work like a charm :D