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 thefetch()
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
The url of the resource to fetch.
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?
1import {fetch} from 'wix-fetch';23// ...45fetch("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));
1import {fetch} from 'wix-fetch';23// ...45fetch( "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));
1import {fetch} from 'wix-fetch';23// ...45fetch("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 } );
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.
1import { fetch } from 'wix-fetch';23// GET call using fetch4export 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
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.
1import { fetch } from 'wix-fetch';23// POST call using fetch4export async function postGreeting(language, greeting) {5 const jsonBody = {6 language,7 greeting8 };910 const fetchOptions = {11 method: 'post',12 headers: 'application/json',13 body: JSON.stringify(jsonBody)14 };1516 const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/greeting', fetchOptions);17 return response.json();18}19