top of page
Hello Fetch

Hello Fetch

Get started integrating with 3rd party APIs using the Fetch API

Intermediate.png

Beginner

2K

Published:

December 18, 2022

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we demonstrate how to use the Fetch API to work with 3rd party APIs. We show usage of the GET HTTP method using both the `fetch()` function and the shortcut `getJSON` function. We also show how to perform a POST request using the `fetch()` function.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Page Elements


Each of the 3 site pages contains elements used to call backend functions and display the results. The backend functions each make HTTP requests using the Fetch API. There is no need to look at the UI code in this example to understand the fetch operations, so we will not analyze it here.


Code


The backend 'dataFetcher.jsw' file contains the code that makes the fetch calls to the 3rd party APIs. It contains the following 3 functions:

  • `getRandomGreeting()`: This function uses `fetch()` to call a 3rd party API. Notice that there are two promises that we need to deal with here. The first is returned by the `fetch()` function and the second is returned by the `json()` function that's used to retrieve the JSON body of the response.

  • `getGreetings()` This function uses `getJSON()` to call a 3rd party API. Notice that there is only one promise that we need to deal with here. We can use this shortcut function when we know the 3rd party API returns a JSON response and we don't need to use any of the fetch options.

  • `postGreeting()`: This function uses `fetch()` to make a POST request to a 3rd party API. We start by building an object that will be used as the request body. Then we create an options object to define the request method, headers, and body. Finally, we make the call to the `fetch()` function using the options and return the JSON response.

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image placeholder.png

Add to Cart Gallery

Let customers to add products to their cart

Intermediate.png

INTERMEDIATE

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Anchor 2
bottom of page