JavaScript Fetch API


The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.


To use the fetch api:

async function postData(url = '', data = {}) {
    const response = await fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        headers: {
          'Content-Type': 'application/json'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        body: JSON.stringify(data) // body data type must match "Content-Type" header

    return response;


The fetch method returns a Response object:

// response
const apiResponse = await postData({
    name: 'Ryan Rickgauer',
    college: 'Northern Illinois University',

To check if the request was successful:

if (apiResponse.ok) {
    console.log('Successful request');
else {
    console.log('Request was not successful!');

If the response returns some json data, you can retrieve it by using the json() method:

const responseData = await apiResponse.json();

© 2024 by Ryan Rickgauer