The Fetch API enables you to send an HTTPS request to a server from your frontend or backend code. You can use the Fetch API to communicate with an external API to access or manage data.
With the Fetch API, you can:
The Fetch API is a Velo implementation of the standard JavaScript Fetch API and works in a similar fashion.
Node.js http, https, and net modules are also available for calling a service.
For examples of how to use the Fetch API, see Getting Started, Using the Fetch API to Add a Currency Converter and Using External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API. . For a video tutorial, see Wix Learn.
Get hands-on experience with the Fetch API on our Hello Fetch example page.
To use the Fetch API, import wixFetch
from the wix-fetch
module:
import wixFetch from "wix-fetch";
Although you can use the Fetch API in frontend or backend code, it's usually best to send requests to external APIs from your backend code. This is more secure, especially if the API requires a key or other authentication, and it avoids CORS issues that can occur when sending some requests from the frontend.
The Fetch API contains two functions for sending HTTP requests: getJSON()
and fetch()
. For simple GET
requests for retrieving a JSON object we recommend using getJSON()
.
For more complex requests, fetch()
provides greater functionality.
The implementation of the fetch()
function differs slightly depending on whether you are using it in backend or frontend code.
The features documented here reflect the base functionality for both implementations.
However, each implementation contains additional features:
Because all Wix sites use HTTPS, you can't request HTTP content from a service in your site's code. Invalid requests cause an error that you can see using your browser's developer tools.
GET
request is used for retrieving data, and a POST
request is used for submitting data.Retrieves the specified resource from the network using HTTPS.
The fetch()
function fetches an HTTPS resource from the network. It returns
a Promise that resolves to a WixFetchResponse
object representing the HTTP response to the request.
Responses with an HTTP status code in the ranges 2xx, 4xx, and 5xx are
considered fulfilled. Use the httpResponse.ok
property to confirm that the HTTP request was successful with a response
code in the 2xx range.
The optional WixFetchRequest
object contains information about an HTTPS request.
Additional functionality is available in each of the respective Fetch API implementations.
Notes:
Some common errors when using the fetch()
function are described here along with possible solutions.
fetch()
call due to a CORS restriction, move the fetch()
call to the backend as described in Accessing 3rd-Party Services.function fetch(
url: string,
options: WixFetchRequest,
): Promise<WixFetchResponse>;
The url of the resource to fetch.
Options for the fetch operation.
import { fetch } from "wix-fetch";
// ...
fetch("https://someapi.com/api/someendpoint", { method: "get" })
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
} else {
return Promise.reject("Fetch did not succeed");
}
})
.then((json) => console.log(json.someKey))
.catch((err) => console.log(err));
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
Retrieves the specified JSON resource from the network using HTTPS.
The getJSON()
function retrieves a JSON resource from the network. It returns
a Promise that resolves to a JSON object representing the response to the request.
To use getJSON
, import it from wix-fetch
:
import { getJSON } from "wix-fetch";
Retrieving the JSON object is performed using the GET method, regardless of
what is specified in the options
parameter.
The Accept
header is assumed to be application/json
by default, but you
can override it by explicitly setting a different value for Accept
.
The optional WixFetchRequest
object contains information about an HTTPS request.
Additional functionality is available in each of the respective Fetch API implementations.
Notes:
Some common errors when using the getJSON()
function are described here along with possible solutions.
getJSON()
call due to a CORS restriction, move the getJSON()
call to the backend as described in Accessing 3rd-Party Services.function getJSON(url: string, options: WixFetchRequest): Promise<object>;
The url of the JSON resource to retrieve.
Options for the retrieval operation.
import { getJSON } from "wix-fetch";
// ...
getJSON("https://someapi.com/api/someendpoint")
.then((json) => console.log(json.someKey))
.catch((err) => console.log(err));
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.