News App

NEWS APP SCREENS

 NEWSAPI
https://newsapi.org/
 NEWSAPI
https://newsapi.org/docs
 ASYNC IN JS
In JavaScript, code execution is single-threaded, which means that only one thing
can happen at a time. The JavaScript engine executes code in a sequential and
synchronized manner, one line at a time.
This means that if there is a time-consuming task in the code, such as an API call
or a long loop, the execution of the entire code will be blocked until the task is
completed. During this time, the application will not be able to respond to any user
input or execute any other code.
Synchronous code is easy to understand and follow, as it executes exactly as
written, one line after the other.

console.log('one')
console.log('two')
console.log('three')// Output: one two three
 ASYNC IN JS
However, this simplicity comes with a disadvantage when dealing with time-
consuming operations, such as delays or network requests, as the entire execution
is blocked until the operation is completed.

We can further illustrate this using the delay() function:

function printDelay() {
console.log('Phew!')
}
delay(5000)
printDelay()
 ASYNC IN JS
In the example above, the code requires a delay of 5 seconds before printing a
greeting message to the console. However, the delay function is synchronous,
which means that the execution of the entire code is blocked for 5 seconds until
the delay function is completed. During this time, the JavaScript engine cannot
execute any other code, making the application unresponsive.

Therefore, to avoid blocking the execution of code, developers use asynchronous

programming techniques such as callbacks, promises, and async/await to handle
long-running tasks in a non-blocking manner.
 ASYNC IN JS
Asynchronous code, on the other hand, is executed in a non-sequential manner,
meaning that the execution of the next line does not wait for the completion of the
previous line. Instead, it continues to execute the remaining code while performing
other tasks in the background.
Asynchronous code is useful when dealing with time-consuming tasks, such as
network requests, file operations, or user interactions. By executing these tasks
asynchronously, the rest of the code can continue to execute without being blocked,
improving the overall performance and responsiveness of the application.
 PROMISES
A Promise is a wrapper object for asynchronous code that represents the eventual
completion or failure of a single asynchronous operation.

A Promise has three states:

 pending - The initial state, neither fulfilled nor rejected.

 fulfilled - The operation completed successfully, resulting in a value.
 rejected - The operation failed, resulting in an error.
 ASYNCHRONOUS FUNCTIONS
In short, asynchronous functions are functions that return promises.
An asynchronous function is marked with a special keyword async:

async function request() {}

const req = async () => {}
class MainClass {
async request() {}
}

They always return a Promise. Even if we didn't explicitly specify it, they would still
return a Promise when called.
 BUNDLING ASYNC/AWAIT
Within asynchronous functions, you can call other asynchronous functions with the help of the await keyword.

async function loadUsers() {

const response = await fetch('/api/users/')
const data = await response.json()
return data
}
In the example above, we use the fetch() method inside the loadUsers() function.
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as
requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch
resources asynchronously across the network.
We call all asynchronous functions inside with await - that way, the Promise function returns are automatically
expanded, and we get the value that was inside the Promise.
 RESPONSE.JSON()
The json() method of the Response interface takes a Response stream and reads it to
completion. It returns a promise which resolves with the result of parsing the body
text as JSON.
Note that despite the method being named json(), the result is not JSON but is
instead the result of taking JSON as input and parsing it to produce a JavaScript
object.
JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and null. It
is based upon JavaScript syntax, but is distinct from JavaScript: most of JavaScript is
not JSON.
PROJECT STRUCTURE
APIS.JS
ARTICLE.JS
ARTICLE.JS
WORLDWIDENEWS.JS
WORLDWIDENEWS.JS
WORLDWIDENEWS.JS
APP.JS