1 of 13

AJAX, Fetch, and Promises

CSCI 344: Advanced Web Technologies

Spring 2025

2 of 13

Outline

Intro to the JavaScript fetch API
Promises
Summary

3 of 13

Intro to “AJAX”

AJAX

AJAX: Stands for “Asynchronous JavaScript and XML”
Enables JavaScript to make server requests and (optionally) update the current screen
Not easy to tell that information is even being transmitted to/from a server
Came on the scene ~2004 (made popular w/Google Mail and Google Maps)

4 of 13

Intro to Fetch

JavaScript’s Fetch API

The Fetch API is a newer API for browsers to communicate asynchronously with servers communication (improving upon AJAX – the older way)
Because this API allows for asynchronous, non-blocking communication with servers, promises were introduced to the JavaScript Language.
Promises are objects that help programmers manage asynchronous communications.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

5 of 13

What is a Promise?

Promises exist to handle asynchronous functionality
Why? If you request a resource the cloud you don’t know how long it’s going to take to process the request.

Slow machine?
Network traffic?
Patchy WIFI!

To handle this, a “promise” allows you to execute a piece of functionality only after the request completes.

It’s like putting a process on the “back burner” until it completes…and in the meantime your browser is free to do other things.

6 of 13

Most requests happen in 2 Parts (w/2 Promises)

async function getData () {

const response = await fetch(url);

const data = await response.json();

}

Source: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch() returns a promise containing the response (a Response object). This is just an HTTP response, not the actual content.
To extract the body content from the response, we use one of the response’s content methods – in this case the json() method – which also returns a promise with the actual data.

7 of 13

Promises: Two Syntaxes > “then” method

Using the promise’s “then” method, which will execute a callback function when the promise finishes its business...�

let url = 'https://www.apitutor.org/yelp/simple/v3/businesses/search?location=Asheville,+NC'

fetch(url)

.then(response => response.json()) // callback function

.then(data => console.log(data)); // callback function

8 of 13

2. Promises: Two Syntaxes > async await

Using the async / await technique. Instead of using “then()” the await keyword ensures that the next line doesn’t execute until the promise resolves.

const getPosts = async () => {

let url = 'https://www.apitutor.org/yelp/simple/v3/businesses/search?location=Asheville,+NC';

const response = await fetch(url);

console.log(response);

const jsonData = await response.json();

console.log(jsonData);

};

getPosts();

9 of 13

Sample files

Let’s take a look at the Lecture 15 sample files to process these ideas…

10 of 13