Fetch API | Appsmith - SolFind Web Lens

Fetch API | Appsmith

https://docs.appsmith.com/write-code/reference/Fetch-API • 63 KB fetched
Open original page
Fetch API | Appsmith

Skip to main content

Ask AI
Search

Ask Appsmith AI Submit message

Examples How do I install Appsmith using Docker? How do I connect to my local PostgreSQL database? How do I pass inputs from a widget to a query? How do I trigger multiple queries conditionally? How do I fix the error: This value does not evaluate to type Array<Object>?

Search

Try Appsmith

* Get Started

* Introduction

* Build Your First App

* Self Hosting

* New Installation Guides

* Manage Installation

* Upgrade Installation Guides

* Concepts

* Connect Data

* Overview

* How-to Guides

* Reference

* Datasources

* Query Settings

* Concepts

* Build Apps

* Overview

* Quickstart

* How-to Guides

* Reference

* Widgets

* Accessibility

* Theme

* Sample Apps

* Write Code

* Overview

* How-to Guides

* Reference

* Global Objects

* Global Functions

* JS Libraries

* Fetch API

* Data Transformation

* JavaScript Settings

* Concepts

* Best Practices

* Manage Apps and Users

* Authentication

* Granular Access Control

* Versioning with Git

* Setup SCIM Provisioning

* Embed Appsmith

* Migrate Applications

* Audit Logs

* Branding

* External Client Portal

* Packages

* Overview

* Tutorial

* How-to Guides

* Reference

* Package Version Control

* GIT Apps with Packages Best Practices

* Code Packages

* UI Packages

* Workflows

* Overview

* Tutorial

* How-to Guides

* Reference

* Workflow Triggers

* Workflow Queries

* Workflow Functions

* Pass Parameters to Workflows

* Run History

* Troubleshooting

* Overview

* Self-hosting Errors

* Application Errors

* Product

* FAQ

* Security

* Telemetry

* Support at Appsmith

* Privacy Policy

* Release Notes

* Contribute

© 2026 Appsmith, Inc.

*

* Write Code

* Reference

* Fetch API
Fetch API

The Fetch API provides an interface for executing network calls programmatically. You can use fetch() to programmatically configure and execute a REST API.

Examples

GET request

Fetches data from the specified URL using a GET request and parses the JSON response.

const questions = await fetch ( "https://opentdb.com/api.php?amount=10" )
return questions . json ( )

POST request

Sends a POST request to create a new resource with the provided data and logs the success or error.

fetch ( "https://63772c9a5c477765121615ba.mockapi.io/users" , {
method : "POST" ,
headers : {
"Content-Type" : "application/json" ,
} ,
body : JSON . stringify ( {
name : "Alex" ,
email : "[email protected]" ,
} ) ,
} ) . then ( ( response ) => {
console . log ( "Success:" , response . json ( ) ) ;
} ) . catch ( ( error ) => {
console . error ( "Error:" , error ) ;
} ) ;

PUT request

The PUT method in the Fetch API is used to update a resource on the server. It is typically used when you want to update the entire resource or create it if it doesn't exist. Here's an example of how you can use the PUT method with the Fetch API:

fetch ( "https://63772c9a5c477765121615ba.mockapi.io/users/1" , {
method : "PUT" ,
headers : {
"Content-Type" : "application/json" ,
} ,
body : JSON . stringify ( {
name : "UpdatedName" ,
email : "[email protected]" ,
} ) ,
} )
. then ( ( response ) => {
if ( ! response . ok ) {
throw new Error ( ` HTTP error! Status: ${ response . status } ` ) ;
}
return response . json ( ) ;
} )
. then ( ( data ) => {
console . log ( "Success:" , data ) ;
} )
. catch ( ( error ) => {
console . error ( "Error:" , error ) ;
} ) ;

File upload

Uploads a file using a POST request with a FormData object and logs the response.

const formData = new FormData ( ) ;
formData . append ( "file" , FilePicker1 . files [ 0 ] ) ;

let response = await fetch ( 'https://httpbin.org/post' , {
method : 'POST' ,
body : formData
} ) ;

Was this page helpful?

Edit this page

Previous
JS Libraries
Next
Data Transformation
Fetch API | Appsmith

Links found on this page
