DEV Community

Cover image for JS Bites: Chapter 4 - Fetch API
Sanjay R
Sanjay R

Posted on • Updated on

JS Bites: Chapter 4 - Fetch API

Fetch API

fetch()is a function used to send the requests to APIs and retrieve data.

const response = fetch('someapi.com');
Enter fullscreen mode Exit fullscreen mode

How Does It Work?

When you pass the URL to fetch(), JavaScript creates a request object internally.

// Internal working
const request = new Request('someapi.com', {
   method: 'GET'   
});

const response = fetch(request);
Enter fullscreen mode Exit fullscreen mode

The above demonstrates the initial workings of fetch(), abstracting away the complexities for you.

Response Object

fetch() is asynchronous, returning a promise that resolves later.

const url = "https://jsonplaceholder.typicode.com/todos/1"; 

async function fetchData() {
    const response = await fetch(url);
    console.log(response);
}

fetchData();

Enter fullscreen mode Exit fullscreen mode

This will output the response object. To obtain data, you need to convert the response object into JSON.

const url = "https://jsonplaceholder.typicode.com/todos/1";

async function fetchData() {
    const response = await fetch(url); 
    const data = await response.json();
    console.log(data.title);
}

fetchData();
Enter fullscreen mode Exit fullscreen mode

GET Requests Parameters

For specific data, parameters can be added to the URL, but this method isn’t secure, For safety, include parameters in the request object.

const url = 'someUrl';

async function getData() {
    const request = new Request(url, {
        headers: {
            'Authorization': 'token'    
        }
    });

    const response = await fetch(request);
    const data = await response.json();
    console.log(data);
}

getData();
Enter fullscreen mode Exit fullscreen mode

Error Handling

Handle errors properly. If the request is successful but the data retrieval fails. it’s still considered a success.

let’s handle the error if the request is made successfully but the data retrieval fails. Check the status code for error handling.

try {
    const response = await fetch(request);
    if (response.status === 200) {
        const data = await response.json(); 
        console.log('Success', data);
    } else {
        console.log('Server error', data.error.message);
    }
} catch(error) {
    console.log(error);
}
Enter fullscreen mode Exit fullscreen mode

POST Request

When you send data to a server, like when submitting a form, you can use the POST method. To do this with fetch(), you need to include the data you want to send in the request body.

const request = new Request(url, {
    headers: {...},
    body: {...}
});
Enter fullscreen mode Exit fullscreen mode

For more detailed information on the Fetch API, refer to the MDN documentation.

Comment your thoughts…

See you in the next chapter…

Top comments (0)