OJET: Calling a REST Service

During my journey from a pure Java EE / Jakarta EE developer using JAX-RS, JSON-B, Jersey etc...  for Java - REST integration to JavaScript (in this case Oracle JET) I was checking the alternatives of calling REST services from JavaScript.

Things has changed a lot since I was doing mostly Vanilla and JQuery JavaScript for some "quick fixes".

Here I bring examples of making a GET request to a REST Service. The rest of operations only needs little bit more configuration, but this post is just to have a look into history in JavaScript and ways of calling a REST service (only making a GET, not a POST, PUT or DELETE)

If you want to execute the code: https://github.com/DanielMerchan/ojet-examples

It is fundamental that you read about JavaScript Promise Object and have a fully understand on it.

Vanilla JavaScript < ES6+

Yes, during my career I had to deal with JavaScript in its early stages to make AJAX calls and requests.

Basically this makes use of XMLHttpRequest JavaScript class.



JQuery $ajax, $get, $post, $getJSON

JQuery has been always there to simplify our lifes usng JavaScript. It also included its wrappers for making AJAX calls by using $ajax.

Now, we have powerful operation such us $getJSON which directly returns the JSON of a GET operation as follows.

Also JQuery now is 100% aligned with JavaScript Promise.

ES6+ JavaScript. Fetch and await

Now there is a very clean way of calling REST by using fetch and await keywords. Fetch makes an asynchronous call to the REST service and await is used to wait till a response is done.

Here two examples calling an Asynchronous Function and other without calling an Asynchronous function.

[gist

If you need to make multiple calls I will recommend the usage of a async wrapper function and the usage await inside of it for "readable code".

Comments

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag
Read more

OJET: Select All options using only Checkboxset

Image
This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')
Read more