You could just make promises in JavaScript

Javascript Promise - if it worked, then ... otherwise

Callbacks for processes that cannot be determined in terms of time

If we are dependent on an unforeseeable process - e.g. when loading an image or a json file - callbacks are used that are called when an event occurs.

Since the callback function is usually only called once, we often see callbacks as anonymous functions. Promises supplement callbacks, give the code a more readable structure and additional guarantees that make the asynchronous process more reliable.

Asynchronous events and waiting

When data is loaded, the wait always takes an indefinite amount of time. If only one charging process needs to be observed, everything is still easy. But what if you have to wait for another action after loading the JSON file, e.g. because the URL of the second JSON file is in the first URL?

const url = "file.json"; const xhr = new XMLHttpRequest (url); xhr.addEventListener ("readystatechange", (url) => {if (xhr.readyState === 4) {console.log (xhr.responseText);}}) xhr.open ("GET", url); xhr.send (); const url = "../fetch.json"; const url2 = "../file.json"; const url3 = "../data.json"; const xhr = new XMLHttpRequest (url); xhr.addEventListener ("readystatechange", (url) => {if (xhr.readyState === 4) {console.log (xhr.responseText); const xhr2 = new XMLHttpRequest (url2); xhr2.addEventListener ("readystatechange" , (url2) => {if (xhr2.readyState === 4) {//console.log ("xhr2" + xhr2.responseText); const xhr3 = new XMLHttpRequest (url3); xhr3.addEventListener ("readystatechange", (url3) => {//console.log ("xhr3" + xhr3.responseText);}); xhr3.open ("GET", url3); xhr3.send ();}}); xhr2.open (" GET ", url2); xhr2.send ();}}); xhr.open ("GET", url); xhr.send ();

Javascript Promise

With nested asynchronous events we get into hell's kitchen, which is also called Callback Hell referred to as. Also jQuery and Javascript fetch wouldn't really simplify this abysmal hole of nested asynchronous calls.

Promises are objects that catch the result of an asynchronous action and return it when the promised data has been loaded successfully or an error has occurred.

Promises are a protective measure. They are never called before the end of waiting for an event and they are only executed once. Regardless of whether a promise can be fulfilled or not, it always calls the correct callback function. In addition, callbacks can be chained to one another: Then the result of one operation calls the next operation at the end.

Promise and then ()

A simple one XMLHttpRequest with just one asynchronous request is clear, but as soon as another request is based on the first request, the code becomes nested and confusing.

Promises represent a method then () available, which will be carried out after the promise has been redeemed. then () Contains two optional arguments: a callback for success, a callback for failure.

For example, a complicated sequence of actions can look like in which two JSON files are to be loaded, whereby reading out the second JSON file only makes sense if the first JSON was delivered correctly.

fetch (url) .then (function (response) {return response.json ();}). then (function (data) {console.log ("url 1" + data)}). then (fetch (url2). then (function (response) {return response.json ();}). then (function (data) {console.log ("url 2" + data)}). then (fetch (url3) .then (function (response ) {return response.json ();}). then (function (data) {console.log ("url 3" + data)})))

Here we have a simple pattern: then followed by a return, then followed by a return.

then calls can be linked sequentially in order to execute additional asynchronous actions one after the other (chaining).

Browser support for promise

Either promise as well as fetch have been supported by the evergreen browsers for quite some time and as always IE11 is left out. Promise and Fetch are not constructs of the programming language, so there is no need for a transpiler, but polyfills are enough.

External sources