Web Applications

Promise

Represents the eventual completion (then()) or failure (catch()) of an asynchronous operation. Promises can be chained. More about promises in other seminar.

doSomethingAsynchronouslyAndReturnPromise()
  .then(function (result) { return transformTheResult(result); })
  .then(function (finalResult) {
    console.log("Got the final result: " + finalResult);
  })
  .catch(failureCallback);
    

Promise with async/await

try {
  const result = await doSomethingAsynchronouslyAndReturnPromise();
  const finalResult = transformTheResult(result);
  console.log("Got the final result: " + finalResult);
} catch (exception) {
  failureCallback();
}
    

AJAX

Asynchronous background HTTP requests to the server without reloading page invoked from JavaScript. The request can utilize HTTP method (GET, POST, DELETE, ...) and contain user defined data. Typically exchanging JSON data, but can be other types (text, HTML, binary, ...).

Data can be send encoded in URL (GET, POST, ..) or in request body (POST, "PUT"). We can send encoded JSON using the body or structure the content with FormData.

Cross-Origin Requests

Cross-origin network access (CORS) is using HTTP readers to control AJAX. Bellow is an example of HTTP response headers allowing anyone to perform GET and POST.

access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: *
    

CORS is implemented and enforced by browsers. Users are still able to execute request by other means!

Cross-origin resource sharing (CORS) is the SELinux of the Web. You really want to do the right thing but it only works when you: "Access-Control-Allow-Origin", "*"

await fetch("https://mff.cuni.cz/");
// See Network tab.
    

Demonstration: Fetch API

function fetchData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log("Got the data: " + data))
    .catch((error) => console.log("Can't fetch data", error));
}
    

Alternative implementation using async/await.

async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json(); // Use .text() to get text content.
    console.log("Got the data:", data);
  } catch(error) {
    console.log("Can't fetch data", error);
  }
}