Fetching data through rest API by react js

Author : Pratik Raj Verma

Department of Information Technology
Institute: Arya college of engineering and IT
DOS: Nov, 2023

Abstract-
In this paper the paper's approach is illustrated using a typical
scenario to highlight the benefits of their composition method.
Furthermore, they implemented a prototype to demonstrate the
applicability of their proposal, conducted experiments, and discussed
the obtained results.

This appears to be a summary or abstract of a research paper, likely

focusing on service composition, linked data, REST principles, and
their implementation in a prototype to showcase practicality and
discuss findings from experiments.

Evolution of Web Services: Over the past decade, web services have
emerged as a significant success factor in enabling interoperability on the
web. These services allow users to find solutions for various tasks easily.
Additionally, service composition or mashups have enabled the combination
of multiple services to address complex user needs, thereby adding value to
the processes.
function is of two type first is named function and second is anonymous
function for name function we will pass named of callback function as a
argument of parent function and and for anonymous function we will pass
whole function as a argument of parent function.
in modern JavaScript we we can replace anonymous function by Arrow
function.
 1. Growth of Web Services and APIs: The success of web services is
evident from the exponential growth in available APIs. For instance, the
reference to ProgrammableWeb highlights the increase in the number of
APIs available on the web. In 2005, ProgrammableWeb referenced 105
APIs, while by 2014, the number had skyrocketed to more than 10,000
APIs, not even including mashups. This indicates the rapid expansion of
available web services during this period.

2. Transition from Traditional Web Service Protocols to REST: While

service-oriented computing gained widespread adoption, the
technologies supporting it underwent changes. Traditionally, the typical
web service protocol stack consisted of SOAP (Simple Object Access
Protocol), WSDL (Web Services Description Language), and UDDI
(Universal Description, Discovery, and Integration). However, these
protocols are gradually being replaced by REST-based approaches. As of
January 14, 2014, ProgrammableWeb noted a significant shift in favor of
REST-based APIs, with 6,833 REST-based APIs compared to 2,125 SOAP-
based APIs.

3. Transition to RESTful Services: A RESTful service adheres to several

principles of Representational State Transfer (REST), which emphasizes a
stateless, client-server communication approach that is uniform,
cacheable, and follows a layered system architecture. The adoption of
RESTful services has seen substantial growth, leading to a notable
decline in the usage of traditional SOAP-based protocols.

URI interaction Deep dive:

1. . Extension of Resources: The model involves enhancing a resource on

the web with a descriptor. This descriptor contains metadata about the
resource itself and information about other related resources. By
extending a resource with such a descriptor, it enhances the resource's
capabilities and connections within the web environment.

2. URI-based Interaction: When the Uniform Resource Identifier (URI) of a

resource is accessible or known, the model facilitates obtaining its
descriptor using a generic interaction pattern. This suggests that given
the URI of a resource, there is a method or mechanism in place to
retrieve its associated descriptor.
 3. Usage of HTTP LINK Header and POWDER: The model utilizes specific
web technologies to enable this interaction. It mentions employing the
HTTP LINK header, a part of the HTTP protocol, which can include
additional links related to the resource. Additionally, it refers to POWDER
(Protocol for Web Description Resources) described-by property
expressed in Resource Description Framework (RDF), a W3C standard for
representing information about resources on the web.

4. Explicit Semantics in Resource Linking: The approach aims to provide

explicit semantics or meaning to the descriptor of a resource by utilizing
the described-by property expressed in RDF through the HTTP LINK
header. This allows for a clear association and understanding of the
relationship between a resource and its descriptor.

5. Visual Representation in Fig 2: The excerpt mentions a visual

representation, likely in Figure 2, demonstrating how the discovery of a
resource occurs and how the LINK field is accessed in the HTTP header.
This visual depiction might illustrate the process of accessing the
descriptor of a resource using the HTTP LINK header in a real or
hypothetical scenario.

Synchronous code-

synchronous code is the execution of code sequently what does it mean there
is n line of code then each code will execute one after another code, initially
our JavaScript is totally synchronous type language but there is a lots of
problem in synchronous code when we deal with event function, server
response, input-output response, in this condition our whole application will
get freeze and stuck if we use synchronous code so that's why all event listner
is a asynchronous type in nature.
Eg. Console.log(‘hello’);
Console.log(‘bolo to ’);
Console.log(‘kaise o’);
Console.log(‘hii’);
This is synchronous code so each code is dependent to their previous code
and run one after another.
If any code is not running then whole code will not run. So this is
disadvantage of this concept if we are dealing with event listner or any server
respose task like api call by backend or server it will get freez to whole
application. So we will use Asynchronous code for this type of problems

Asynchronous code-

asynchronous code is totally opposite of synchronous code in asynchronous

code any code will not depend on previous code, it means here is random
execution of code so asynchronous code allow JavaScript to parallelly run the
code
let suppose there is event listener function and they require event by user and
user is not performing any event then it will not get stuck the whole application
it will send the event listener function to Browser by event loop and when user
click to the specified button then that event function get popped and goes to
event queue and then it will check our call stack and if call stack is empty then
that event listener function will execute, actually this whole process is execute
by event loop.

what is event loop?

It is a concept used in JavaScript to handle with asynchronous code like event

listener in event loop there is basically three component
1 is callstack
2 is browser
3 is event queue

eg. console.log('abcd');
let content=document.querySelector('.wrapper');
content.addEventListener('click',function(event)
{

console.log('this is para'+event.target.textContent);
});
console.log('1234');

in this code first abcd will print and if user has clicked on wrapper then also
1234 will print then after this “'this is para” it will print.

so here this is happening console.log ABCD will goes to call stack and it will
print and then listener goes to call stack and then to Browser Handler it will
wait till user is clicked on specific tag and then third code is console.log 1234
will execute and if user clicked specific tag then it will go to event queue then it
will check that call stack is empty or not if call stack is empty then event
listener function will execute that is it will print this is para 1
for asynchronous code event listener there is three component call stack
Browser Handler event queue every asynchronous code will go through these
three component and this will execute by loop and this actually synchronous
code there is no need of event loop only event loop is required for
asynchronous for their execution it is very important point is that after
synchronous code our event listener has executed instead of this it will not
execute till call stack is not empty so, for running asynchronous code it is very
important that call stack is empty.

1. ReLL for RESTful Web Service Description: ReLL (Representational

Language for Linked Services) is a solution focused on describing
RESTful web services, particularly emphasizing the Hypermedia as the
Engine of Application State (HATEOAS) property. According to ReLL, a
RESTful service comprises a collection of interconnected resources.
Each resource has a unique identifier, a name, a human-readable
description, and optional properties. Resources may have different
representations based on media types or syntaxes in use, and these
representations can contain links to other resource representations.
Additionally, ReLL supports explicit application domain semantics
within resource representations, often achieved through resource
annotations.
2. LRDD (Link-based Resource Descriptor Discovery): LRDD is an
initiative aimed at describing and obtaining information about web
resources identified by URIs. It involves indicating a resource's
descriptor link through the resource itself using various methods, such
as utilizing the Link field within the HTTP header. This link to the
descriptor is specific to the resource URI, and the descriptor's content
is machine-readable information that enhances interoperability and
improves interactions with the resources.

3. HTTP Vocabulary in RDF: This refers to a W3C working draft focused

on representing the HTTP protocol in RDF (Resource Description
Framework) format. The primary goal is to establish a connection
between the REST paradigm and the concepts of the Semantic Web. By
representing HTTP in RDF, it aims to link the fundamental concepts of
RESTful services with semantic web concepts, thereby enhancing the
interoperability and semantic understanding of web resources.we
know that all asynchronous code is totally based on callback function and
for making asynchronous code as a synchronous code we will have to
make multiple callback function inside previous callback function and so
on and whole code will look like nested callback function and it looks
like callback hell.