[WP] 26.02.2023 | async js

 

fig 1.1 Promise handling flow

-----------------------------------------------------------------------

Data fetching is a topic which I thoroughly revised recently. Back in the past http requests were made with XMLHttpRequest objects (XHR). Fetch is most recent way to do http requests. It is a promise-based so the value returned from fetch function is a Promise. Promises let user to start long running asynchronous function and returns immediately a promise so that the runtime may handle other functionalities. Response is an object of fulfiled promise returned by fetch request. It contains field such as headers, status and other network information such as eg body of the response. The promise may be rejected in two ways. Explicitly rejected with rejecting callback(2nd argument of Promise constructors cb function). Implicitly rejected when error is thrown

Async/await is relatively new syntax which allows to handle asynchronous operations in more synchronous-looking way. More over async/await syntax unlike a promises can be combined with try/catch statements. All asynchronous operations handled with async/await syntax need to be contained within a function. A function declaration is to be pre-fixed with async keyword – it basically says „Hey i am a function with ansynchronous operations within my body”. All asynchronous operations eg „fetching data from network” need to be prefixed with await keyword – and it signalizes „Hey! wait until this operation will finish and continue right after this occurs”. When we await a promise it waits to see how that promise will resolve and forwards the resolved value along, letting us assign it to a variable. It is key fact that all responses recieved from a network request need to be parsed JSON.parse() and all info intended to be send within request body need to be serialized with JSON.stringify() method. First parameter of fetch is URL. Second parameter of fetch is options object. It contains the following fields: method,headers(eg ‚Authorization’ header with token as a value.)

The one and only way to attach some information to GET request is to include it as a query paramas. Query params are explicitly attached to the URL started by ? <question mark> and given in form of pairs key=value separated by &<ampersand>. Previously stringified parameters may be attached to POST request as a Body params – object which is a value of body field within fetch method second argument – options object. The body of the POST method request is called payload.

With asynchronous values we are less interested with exact time operation finishes. We define ways to react to operation outcome. Pending means – waiting to settle. Settled means it was either fulfiled or rejected. Fulfiled means that it was resolved(sucessfully) and Rejected means it was explicitly rejected (reject method was used) or implicitly rejected(error was thrown). promise has also .then and .catch methods which allows to handle resolved and rejected promises(errors). Thenable is a term for a object which have a .then method – in other words is promise-like. New instance of promise may be created like this: let prom = new Promise((res, rej)=>{}). Methods Promise.resolve() and Promise.reject() allows to create immeditely resolved or immediately rejected promise. Promise chaining is a process of handling a promise with use of consequent .then methods and .catch methods.

Cheers!

gmarcin