DEV Community: Monicah Ajeso

The Fetch API (With async/await)

Monicah Ajeso — Tue, 07 Apr 2026 08:22:51 +0000

What is the Fetch API?

The Fetch API is JavaScript's built-in way of making network requests — asking a server for data or sending data to one.

Every time you call fetch(), it returns a Promise (remember those?). That Promise eventually resolves with a Response object — which holds whatever the server sent back.

fetch() → Promise → Response → Your Data

The Basic Structure

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

Two .then() calls — here's why:

The first .then() gets the raw Response object and converts it to JSON
The second .then() gives you the actual data you asked for
.catch() handles anything that goes wrong

💡 response.json() also returns a Promise — that's why you need the second .then()

async/await — A Cleaner Way to Write Fetch

Promises with .then() work perfectly fine, but async/await makes the same code easier to read — especially as your requests get more complex.

// With .then()
fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

// With async/await — same thing, cleaner look
async function getUsers() {
  try {
    const response = await fetch("https://api.example.com/users");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

await tells JavaScript: "pause here and wait for this Promise to resolve before moving on."

try/catch replaces .catch() for handling errors.

💡 You can only use await inside a function marked async

GET — Fetching Data

GET is the default method — you don't even need to specify it. Use it when you want to read data from a server.

async function getUser() {
  try {
    const response = await fetch("https://api.example.com/users/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

getUser();

Sample response:

{
  "id": 1,
  "name": "Monicah",
  "role": "developer"
}

POST — Sending Data

POST is used when you want to create something new on the server — like submitting a form or creating an account.

This time you need to pass a second argument to fetch() — an options object that describes your request.

async function createUser() {
  try {
    const response = await fetch("https://api.example.com/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        name: "Monicah",
        role: "developer"
      })
    });

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

createUser();

Three new things here:

method — tells the server what you want to do ("POST")
headers — tells the server you're sending JSON
body — the actual data you're sending, converted to a JSON string with JSON.stringify()

PUT — Replacing Data

PUT is used to replace an existing resource entirely. You're not updating one field — you're sending the full updated object.

async function updateUser() {
  try {
    const response = await fetch("https://api.example.com/users/1", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        name: "Monicah W",
        role: "frontend developer"
      })
    });

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

updateUser();

💡 Notice the URL — /users/1 targets a specific user. You have to tell the server which resource you're replacing.

DELETE — Removing Data

DELETE is used to remove a resource from the server. Most of the time you don't need a body — just the URL and the method.

async function deleteUser() {
  try {
    const response = await fetch("https://api.example.com/users/1", {
      method: "DELETE"
    });

    if (response.ok) {
      console.log("User deleted successfully");
    }
  } catch (error) {
    console.log("Error:", error);
  }
}

deleteUser();

response.ok is true when the status code is between 200–299 — a quick way to check if the request succeeded.

Quick Comparison

Method	Purpose	Needs a body?
`GET`	Read data	No
`POST`	Create new data	Yes
`PUT`	Replace existing data	Yes
`DELETE`	Remove data	No

.then() vs async/await — Which Should You Use?

Both do the same thing. It comes down to readability:

	`.then()`	`async/await`
Style	Chain-based	Looks like regular code
Error handling	`.catch()`	`try/catch`
Best for	Simple, single requests	Multiple requests in sequence

For most real-world use cases, async/await is preferred — especially when you need to make one request that depends on the result of another.

Happy coding!!! 😊

APIs

Monicah Ajeso — Wed, 25 Mar 2026 15:35:58 +0000

"You've been using APIs your whole developer life. You just didn't know what to call them."

Every time you check the weather, log into Google, or get a "Wrong password" message — something is happening behind the scenes. Data is being requested. Responses are being sent back. And somewhere in the middle, an API is doing its job.

What is an API?

API stands for Application Programming Interface — which sounds intimidating, but all it means is: a way for two applications to talk to each other.

Think about a power socket. You don't know how electricity gets to your house — the wires, the grid, the power station. You just plug in. The socket gives you one clean, standard way to access the power without dealing with any of the complexity underneath.

APIs work the same way — they hide the complexity and give you one clean point of access to data or functionality you need.

How APIs Work

Every API conversation has two sides — a request and a response.

Your App  →  REQUEST  →  API  →  Server
Your App  ←  RESPONSE ←  API  ←  Server

Your application sends a request — asking for data or telling the server to do something
The API takes that request to where the data lives
The server does its thing
The API sends back a response — either the data you asked for, a confirmation, or an error

You never touch the server directly. The API is the middleman — and it's very good at its job.

Key Concepts

Endpoints

An endpoint is a specific URL where an API can be accessed. Think of it as a door — each door leads to something different.

https://api.example.com/users       → get all users
https://api.example.com/users/1     → get user with id 1
https://api.example.com/posts       → get all posts

HTTP Methods

When you make a request, you also specify what you want to do. These are called HTTP methods:

Method	What it does
`GET`	Read / fetch data
`POST`	Create new data
`PUT`	Replace existing data entirely
`PATCH`	Update part of existing data
`DELETE`	Remove data

💡 Think of it like: GET is asking. POST is adding. PUT/PATCH is editing. DELETE is removing.

Status Codes

Every response comes with a status code — a number that tells you what happened.

Code	Meaning
`200`	OK — everything worked
`201`	Created — new data was made
`400`	Bad Request — something wrong with your request
`401`	Unauthorized — you need to log in
`404`	Not Found — that doesn't exist
`500`	Server Error — something broke on their end

💡 Think of it like: 2xx = good, 4xx = your fault, 5xx = their fault.

JSON

Most APIs speak JSON (JavaScript Object Notation) — a lightweight format for sending data back and forth. It looks like this:

{
  "name": "Monicah",
  "role": "developer",
  "learning": ["JavaScript", "React"]
}

It's just key-value pairs. JavaScript reads it natively, which is one of the reasons APIs and JavaScript work so well together.

The Most Important APIs in JavaScript Development

You don't always have to call an external server to use an API. JavaScript ships with built-in browser APIs that you use constantly — you've probably used them already without thinking about it.

1. The DOM API

The Document Object Model (DOM) API is what lets JavaScript interact with your HTML and XML documents. Every time you select an element, change text, add a class, or listen for a click — you're using the DOM API.

// Selecting an element
const title = document.querySelector("h1");

// Changing content
title.textContent = "Hello, World!";

// Listening for events
document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

💡 Think of it like: The DOM API is JavaScript's remote control for your webpage. You point it at any element and tell it what to do.

2. The Fetch API

The Fetch API is how JavaScript makes network requests — asking an external server for data. This is the one that ties directly to Promises (remember those?). fetch() always returns a Promise.

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

💡 Think of it like: The Fetch API is your app's messenger — it goes out to a server, grabs what you need, and brings it back.

3. The Web Storage API

The Web Storage API lets you save data directly in the user's browser — no server needed. It has two options:

localStorage — data persists even after the browser is closed
sessionStorage — data is cleared when the tab is closed

// Saving data
localStorage.setItem("username", "Monicah");

// Reading data
const user = localStorage.getItem("username");
console.log(user); // "Monicah"

// Removing data
localStorage.removeItem("username");

💡 Think of it like: localStorage is a sticky note on the user's browser. sessionStorage is a sticky note that disappears when they leave the page.

Putting it all together

API	What it does	Where data lives
DOM API	Controls the webpage	The browser document
Fetch API	Makes network requests	External server
Web Storage API	Saves data client-side	User's browser

Each one gives you a clean, standard interface to something complex underneath — which is exactly what an API is supposed to do.

Promises taught us how JavaScript handles waiting. APIs are what it's actually waiting for — and now you know how to speak their language.

And that's not just a promise — that's the whole contract.

Happy coding!!! 😊

JavaScript Promise.

Monicah Ajeso — Wed, 11 Mar 2026 14:48:35 +0000

"Remember callbacks? Well JavaScript made them a promise — and this time it kept it."

Callbacks came first, but they had a problem — "Callback Hell" — when you nest too many callbacks it becomes a messy pyramid of doom. Promises were created to solve exactly that.

Promise

A promise is an object that might produce a value at some point in the future.

A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: the operation was completed successfully.
rejected: the operation failed.

let myPromise = new Promise(function(resolve, reject) {

  // Code that may take some time

  resolve(value); // when successful
  reject(value);  // when error
});

While a Promise is in the pending state, it's said to be unresolved. When it finishes its work, it becomes resolved — whether it was fulfilled or rejected.

Handling a Promise's Outcome

Once a promise resolves, you need a way to react to it. That's where these three methods come in.

`.then()`

Called when a promise is fulfilled. Whatever you passed into resolve() lands here.

myPromise.then(function(value) {
  console.log("Got it:", value);
});

💡 Think of it like: "When you're done, do this with the result."

`.catch()`

Called when a promise is rejected. Whatever you passed into reject() lands here.

myPromise.catch(function(error) {
  console.log("Something went wrong:", error);
});

💡 Think of it like: "If something breaks, handle it here."

`.finally()`

Runs no matter what — fulfilled or rejected. Good for cleanup work (like hiding a loading spinner).

myPromise.finally(function() {
  console.log("Done — one way or another.");
});

💡 Think of it like: "Whether it worked or not, do this last thing."

And since these methods return a promise themselves, you can chain them:

myPromise
  .then(value => console.log("Success:", value))
  .catch(error => console.log("Error:", error))
  .finally(() => console.log("All done!"));

Promise Static Methods

These live on the Promise object itself and deal with multiple promises at once.

`Promise.all()`

Takes an array of promises and waits for all of them to fulfill. If even one rejects, the whole thing rejects.

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)) // [result1, result2, result3]
  .catch(error => console.log("One failed:", error));

💡 Think of it like: "Everyone has to show up, or we're not starting."

`Promise.allSettled()`

Like Promise.all(), but it never rejects — it waits for every promise to finish (fulfilled or rejected) and gives you a report on each one.

Promise.allSettled([promise1, promise2])
  .then(results => {
    results.forEach(result => console.log(result.status, result.value ?? result.reason));
  });

💡 Think of it like: "Tell me how everyone did, good or bad."

`Promise.race()`

Resolves or rejects as soon as the first promise settles — whoever finishes first wins.

Promise.race([promise1, promise2])
  .then(value => console.log("First one done:", value));

💡 Think of it like: "First to cross the finish line, wins."

`Promise.any()`

Resolves as soon as any one promise fulfills. Only rejects if all of them reject.

Promise.any([promise1, promise2])
  .then(value => console.log("First success:", value))
  .catch(() => console.log("All of them failed."));

💡 Think of it like: "I just need one person to show up."

Quick Comparison

Method	Resolves when	Rejects when
`Promise.all`	All fulfill	Any one rejects
`Promise.allSettled`	All settle (either way)	Never
`Promise.race`	First one settles	First one rejects
`Promise.any`	First one fulfills	All reject

Promises won't fix all your async problems — but unlike callbacks, at least they'll let you know when they've failed you.

Happy coding 😊!!!

JavaScript said 'I'll call you back' — and this is what it actually meant

Monicah Ajeso — Mon, 09 Mar 2026 19:09:01 +0000

If you've been learning JavaScript you've probably heard the word callback thrown around. It sounds scary but by the end of this article it'll feel like second nature. Let's break it down.

Callback Function

A callback function is a function passed into another function as an argument, which is then executed or ("called back") at a later point in time to complete a specific task.

Types of Callback Functions

Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting. This is essential for preventing the application from freezing during long-running tasks like network requests.

Synchronous callbacks are executed immediately within the outer function, blocking further operations until completion. Array methods like map(), filter(), and forEach() use synchronous callbacks.

Passing a Function as an Argument

function greetings(name, sayHi) {
  return name + sayHi(); // call sayHi as a function with ()
}

function sayHi() {
  return " Bonjour!";
}

console.log(greetings("Marie", sayHi)); // pass sayHi without () as the callback
// "Marie Bonjour!"

💡 sayHi is a callback function passed as an argument to greetings(), which then calls it internally to return the greeting alongside the name.

Event Handling

User interactions, such as button clicks or key presses, can be handled by providing a callback function to an event listener:

<!-- index.html -->
<button id="myButton">Click Me!</button>

// script.js
const button = document.getElementById("myButton");

button.addEventListener("click", clickedBtn);

function clickedBtn() {
  alert("Button clicked!");
}

💡 In the example above, we first grab the button from the HTML, tell it to listen for a click via addEventListener(), pass in clickedBtn as a callback without parentheses so we're not calling it ourselves, and finally let the browser call it for us the moment the click happens.

setTimeout()

Window functions like setTimeout() use callbacks to execute code after a specified delay.

<!-- index.html -->
<div id="display"></div>

const displayDiv = document.getElementById("display");

setTimeout(myFunction, 3000);

function myFunction() {
  displayDiv.innerHTML = "I miss you!";
}

💡 In the example above, myFunction is a callback function passed as an argument to setTimeout(), which waits 3 seconds before calling it to display the message inside the div.

Array Methods

Many built-in array methods like map(), filter(), and forEach() accept callback functions to define the action performed on each element.

forEach() — loops through every element:

const fruits = ["apple", "banana", "mango"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});
// apple
// banana
// mango

map() — transforms every element into something new:

const numbers = [1, 2, 3];

const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6]

filter() — keeps only elements that pass a condition:

const ages = [10, 18, 25, 12, 30];

const adults = ages.filter(function(age) {
  return age >= 18;
});
console.log(adults); // [18, 25, 30]

💡 In each example above, the anonymous function passed into forEach(), map(), and filter() is a callback — the array method calls it automatically on every element so you don't have to write a loop yourself.

Callbacks are everywhere in JavaScript. Once you recognise the pattern — a function passed into another function — you'll start seeing them in every codebase you touch.

Happy Coding!! ☺️