Search.../

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.
  • You cannot request HTTP content if your site is an HTTPS site. To fix this issue you can either use the HTTPS protocol to fetch the requested resources or you can turn off SSL on your site.

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:

Was this helpful?

Get a resource

Code Example

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

Code Example

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

Code Example

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 } );