An implementation of the standard which can be used in public and backend code for fetching resources from using HTTPS. . Javascript Fetch API 3rd party services Learn more (Additional information about this section) Guides Introduction (Perform actions on an object) Functions : Retrieves the specified resource from the network using HTTPS. fetch( ) : Retrieves the specified JSON resource from the network using HTTPS. getJSON( ) Subcategories : An object returned by the fetch() function representing an HTTP response to a fetch. WixFetchResponse Related Content Accessing 3rd-Party Services with the Fetch API Calling Server-Side Code from the Front-End with Web Modules Stripe Payment Processing Expose and Access Site APIs Create a Weather Widget Sending an Email on Form Submission JavaScript Support Secrets Manager Introduction To make a request, call the function with the path to a resource and the optional options. The function returns a promise that resolves to a . The response object contains a number of properties and functions for retrieving the response's information. fetch() WixFetchRequest WixFetchResponse The Fetch API can be used in your front-end or backend code. To use the Fetch API in the backend, import the function from the module: fetch wix-fetch {fetch} ; import from 'wix-fetch' The implementation of the Fetch API differs slightly depending on where it's being used. The features documented here comprise the base functionality for both implementations. However, each implementation contains additional features: In public files, the native browser's is used.In backend files the module is used. Fetch API node-fetch fetch( ) Retrieves the specified resource from the network using HTTPS. Description The function fetches an HTTPS resource from the network. It returns a Promise that resolves to a object representing the HTTP response to the request. fetch() WixFetchResponse Responses with an HTTP status code in the ranges 2xx, 4xx, and 5xx are considered fulfilled. Use the property to confirm that the HTTP request was successful with a response code in the 2xx range. httpResponse.ok The optional object contains information about an HTTPS request. Additional functionality is available in each of the respective . WixFetchRequest Fetch API implementations Notes: Some common errors when using the function are described here along with possible solutions. fetch() 1. You can usually tell if you are experiencing these issues by checking your browser's console using the . browser's developer tools 2. Certain (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 , , or code. All other requests need to be made from your site's code. If you are experiencing an issue with a call due to a CORS restriction, move the fetch() call to the backend as described in . CORS Public Page Site Backend fetch() Accessing 3rd Party Services 3. 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 Get a resource {fetch} ; fetch( , { : })
  .then( { (httpResponse.ok) { httpResponse.json();
    } { .reject( );
    }
  } )
  .then( .log(json.someKey))
  .catch( .log(err)); import from 'wix-fetch' // ... "https://someapi.com/api/someendpoint" "method" "get" ( ) => httpResponse if return else return Promise "Fetch did not succeed" => json console => err console Post data to a resource {fetch} ; fetch( , { : , : { : }, : } )
  .then( { (httpResponse.ok) { httpResponse.json();
    } { .reject( );
    }
  } )
  .then( .log(json.someKey) )
  .catch( .log(err)); import from 'wix-fetch' // ... "https://someapi.com/api/someendpoint" "method" "post" "headers" "Content-Type" "application/x-www-form-urlencoded" "body" "somekey=somevalue" ( ) => httpResponse if return else return Promise "Fetch did not succeed" ( ) => json console => err console Get a resource and the response information {fetch} ; fetch( , { : })
  .then( { url = httpResponse.url; statusCode = httpResponse.status; statusText = httpResponse.statusText; headers = httpResponse.headers; bodyUsed = httpResponse.bodyUsed; (httpResponse.ok) { httpResponse.json();
    } { .reject( );
    }
  } )
  .then( { .log(json.someKey);
  } )
  .catch( { .log(err);
  } ); import from 'wix-fetch' // ... "https://someapi.com/api/someendpoint" "method" "get" ( ) => httpResponse let let let let let if return else return Promise "Fetch did not succeed" ( ) => json console ( ) => err console Returns Fulfilled - The HTTP response of the fetch operation. Rejected - The error that caused the rejection. Promise< > Return Type: WixFetchResponse getJSON( ) Retrieves the specified JSON resource from the network using HTTPS. Description The function retrieves a JSON resource from the network. It returns a Promise that resolves to a JSON object representing the response to the request. getJSON() To use , import it from : getJSON wix-fetch {getJSON} ; import from 'wix-fetch' Retrieving the JSON object is performed using the GET method, regardless of what is specified in the parameter. options The header is assumed to be by default, but you can override it by explicitly setting a different value for . Accept application/json Accept The optional object contains information about an HTTPS request. Additional functionality is available in each of the respective . WixFetchRequest Fetch API implementations Notes: Some common errors when using the function are described here along with possible solutions. getJSON() 1. You can usually tell if you are experiencing these issues by checking your browser's console using the . browser's developer tools 2. Certain (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 call due to a CORS restriction, move the call to the backend as described in . CORS getJSON() getJSON() Accessing 3rd Party Services 3. 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 getJSON url: string, [options: WixFetchRequest] Promise Object getJSON Parameters Get a JSON resource {getJSON} ; getJSON( )
  .then( .log(json.someKey))
  .catch( .log(err)); import from 'wix-fetch' // ... "https://someapi.com/api/someendpoint" => json console => err console Returns Fulfilled - The JSON response of the fetch operation. Rejected - The error that caused the rejection. Promise<Object> Return Type: Previously published at https://www.wix.com/velo/reference/wix-fetch/getjson

Fetch

Stripe

Properties and Events Velo Panel Puzzled Out: Find Answers to Your Questions

Step-by-Step Guide on How to Build a Web Application with Velo

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

The wix-fetch Module as the Way to Take Your Website to the Next Level

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps