← Back to Examples

Fetch API - Interactive Demo

Using JSONPlaceholder - a free fake REST API for testing.

GET Fetch Users

Fetches a list of users from the API.

Click "Fetch Users" to see the result...
Code:
async function fetchUsers() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    console.log(users);
}
GET Fetch Single Post
Post ID:
Enter a post ID (1-100) and click "Fetch"...
POST Create New Post
Fill the form and click "Create Post"...
Code:
async function createPost(title, body) {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title, body, userId: 1 })
    });
    const result = await response.json();
    console.log('Created:', result);
}
PUT Update Post
Fill the form and click "Update Post"...
DELETE Delete Post
Post ID to delete:
Enter a post ID and click "Delete"...
Error Handling Demo

Try fetching from invalid endpoints to see error handling:

Click a button to see error handling in action...

← Back to Examples