fetch( )

Retrieves the specified resource from the network using HTTPS.

Description

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.
You can usually tell if you are experiencing these issues by checking your browser's console using the browser's developer tools.
Certain CORS (Cross-Origin Resource Sharing) requests are restricted when originating from a browser. Usually, GET requests and certain POST requests can be made from your site's Public, Page, or Site code. All other requests need to be made from your site's Backend code. If you are experiencing an issue with a fetch() call due to a CORS restriction, move the fetch() call to the backend as described in Accessing 3rd-Party Services.
Because all Wix sites use HTTPS, you can't request HTTP content from a service in your site's code.

Syntax

function fetch(url: string, [options: WixFetchRequest]): Promise<WixFetchResponse>

fetch Parameters

NAME

TYPE

DESCRIPTION

url

string

The url of the resource to fetch.

options

Optional

WixFetchRequest

Options for the fetch operation.

Returns

Fulfilled - The HTTP response of the fetch operation. Rejected - The error that caused the rejection.

Return Type:

Promise<WixFetchResponse>

Was this helpful?

Get a resource

Copy Code

1import {fetch} from 'wix-fetch';
2
3// ...
4
5fetch("https://someapi.com/api/someendpoint", {"method": "get"})
6  .then( (httpResponse) => {
7    if (httpResponse.ok) {
8      return httpResponse.json();
9    } else {
10      return Promise.reject("Fetch did not succeed");
11    }
12  } )
13  .then(json => console.log(json.someKey))
14  .catch(err => console.log(err));

Post data to a resource

Copy Code

1import {fetch} from 'wix-fetch';
2
3// ...
4
5fetch( "https://someapi.com/api/someendpoint", {
6  "method": "post",
7  "headers": {
8    "Content-Type": "application/x-www-form-urlencoded"
9  },
10  "body": "somekey=somevalue"
11} )
12  .then( (httpResponse) => {
13    if (httpResponse.ok) {
14      return httpResponse.json();
15    } else {
16      return Promise.reject("Fetch did not succeed");
17    }
18  } )
19  .then( (json) => console.log(json.someKey) )
20  .catch(err => console.log(err));

Get a resource and the response information

Copy Code

1import {fetch} from 'wix-fetch';
2
3// ...
4
5fetch("https://someapi.com/api/someendpoint", {"method": "get"})
6  .then( (httpResponse) => {
7    let url = httpResponse.url;
8    let statusCode = httpResponse.status;
9    let statusText = httpResponse.statusText;
10    let headers = httpResponse.headers;
11    let bodyUsed = httpResponse.bodyUsed;
12    if (httpResponse.ok) {
13      return httpResponse.json();
14    }
15    else {
16      return Promise.reject("Fetch did not succeed");
17    }
18  } )
19  .then( (json) => {
20    console.log(json.someKey);
21  } )
22  .catch( (err) => {
23    console.log(err);
24  } );

Get a resource

In this example, we demonstrate how you can you can get a resource using fetch(). You can test out the code in our example template.

Copy Code

1import { fetch } from 'wix-fetch';
2
3// GET call using fetch
4export async function getRandomGreeting() {
5  const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/randomgreeting');
6  if(response.ok) {
7    const json = await response.json();
8    return json.greeting;
9  } else {
10    return Promise.reject("Fetch did not succeed");
11  }
12}
13

Post data to a resource

In this example, we demonstrate how you can you can post data to a resource using fetch(). You can test out the code in our example template.

Copy Code

1import { fetch } from 'wix-fetch';
2
3// POST call using fetch
4export async function postGreeting(language, greeting) {
5  const jsonBody = {
6    language,
7    greeting
8  };
9  
10  const fetchOptions = {
11    method: 'post',
12    headers: 'application/json',
13    body: JSON.stringify(jsonBody)
14  };
15
16  const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/greeting', fetchOptions); 
17  return response.json();
18}
19