wix-fetch

wix-fetch

An implementation of the standard Javascript Fetch API which can be used in public and backend code for fetching resources from 3rd party services using HTTPS.

To make a request, call the fetch() function with the path to a resource and the optional WixFetchRequest options. The returns a promise that resolves to a WixFetchResponse. The response object contains a number of properties and functions for retrieving the response's information.

The Fetch API can be used in your front-end or backend code.

To use the Fetch API in the backend, import the fetch function from the wix-fetch module:

ICAgaW1wb3J0IHtmZXRjaH0gZnJvbSAnd2l4LWZldGNoJzs=
   import {fetch} 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 Fetch API is used.
  • In backend files the node-fetch module is used.

Contents

WixFetchResponse An object returned by the fetch() function representing an HTTP response to a fetch.
fetch( ) Retrieves the specified resource from the network using HTTPS.
WixFetchRequest An object used by the fetch() function representing an HTTPS request.
fetch( )

fetch( )

Retrieves the specified resource from the network using HTTPS.

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

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.

Parameters

url String The url of the resource to fetch.
options WixFetchRequest Options for the fetch operation.

Return Value

Returns a Promise

On fulfillment WixFetchResponse The HTTP response of the fetch operation
On rejection Error The error that caused the rejection.

Examples

Get a resource

aW1wb3J0IHtmZXRjaH0gZnJvbSAnd2l4LWZldGNoJzsKCi8vIC4uLgoKZmV0Y2goImh0dHBzOi8vZXhjaGFuZ2VyYXRlc2FwaS5pby9hcGkvbGF0ZXN0Iiwge21ldGhvZDogImdldCJ9KQogIC50aGVuKCAoaHR0cFJlc3BvbnNlKSA9PiB7CiAgICBpZiAoaHR0cFJlc3BvbnNlLm9rKSB7CiAgICAgIHJldHVybiBodHRwUmVzcG9uc2UuanNvbigpOwogICAgfSBlbHNlIHsKICAgICAgcmV0dXJuIFByb21pc2UucmVqZWN0KCJGZXRjaCBkaWQgbm90IHN1Y2NlZWQiKTsKICAgIH0KICB9ICkKICAudGhlbihqc29uID0+IGNvbnNvbGUubG9nKGpzb24ucmF0ZXNbIlVTRCJdKSkKICAuY2F0Y2goZXJyID0+IGNvbnNvbGUubG9nKGVycikpOwo=
import {fetch} from 'wix-fetch';

// ...

fetch("https://exchangeratesapi.io/api/latest", {method: "get"})
  .then( (httpResponse) => {
    if (httpResponse.ok) {
      return httpResponse.json();
    } else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then(json => console.log(json.rates["USD"]))
  .catch(err => console.log(err));

Get a resource and the response information

aW1wb3J0IHtmZXRjaH0gZnJvbSAnd2l4LWZldGNoJzsKCi8vIC4uLgoKZmV0Y2goImh0dHBzOi8vZXhjaGFuZ2VyYXRlc2FwaS5pby9hcGkvbGF0ZXN0Iiwge21ldGhvZDogImdldCJ9KQogIC50aGVuKCAoaHR0cFJlc3BvbnNlKSA9PiB7CiAgICBsZXQgdXJsID0gaHR0cFJlc3BvbnNlLnVybDsKICAgIGxldCBzdGF0dXNDb2RlID0gaHR0cFJlc3BvbnNlLnN0YXR1czsKICAgIGxldCBzdGF0dXNUZXh0ID0gaHR0cFJlc3BvbnNlLnN0YXR1c1RleHQ7CiAgICBsZXQgaGVhZGVycyA9IGh0dHBSZXNwb25zZS5oZWFkZXJzOwogICAgbGV0IGJvZHlVc2VkID0gaHR0cFJlc3BvbnNlLmJvZHlVc2VkOwogICAgaWYgKGh0dHBSZXNwb25zZS5vaykgewogICAgICByZXR1cm4gaHR0cFJlc3BvbnNlLmpzb24oKTsKICAgIH0KICAgIGVsc2UgewogICAgICByZXR1cm4gUHJvbWlzZS5yZWplY3QoIkZldGNoIGRpZCBub3Qgc3VjY2VlZCIpOwogICAgfQogIH0gKQogIC50aGVuKCAoanNvbikgPT4gewogICAgY29uc29sZS5sb2coanNvbi5yYXRlc1siVVNEIl0pOwogIH0gKQogIC5jYXRjaCggKGVycikgPT4gewogICAgY29uc29sZS5sb2coZXJyKTsKICB9ICk7Cg==
import {fetch} from 'wix-fetch';

// ...

fetch("https://exchangeratesapi.io/api/latest", {method: "get"})
  .then( (httpResponse) => {
    let url = httpResponse.url;
    let statusCode = httpResponse.status;
    let statusText = httpResponse.statusText;
    let headers = httpResponse.headers;
    let bodyUsed = httpResponse.bodyUsed;
    if (httpResponse.ok) {
      return httpResponse.json();
    }
    else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => {
    console.log(json.rates["USD"]);
  } )
  .catch( (err) => {
    console.log(err);
  } );
WixFetchRequest

WixFetchRequest

An object used by the fetch() function representing an HTTPS request.

Description

The WixFetchRequest object contains information about an HTTPS request. More functionality is available in each of the respective Fetch API implementations.

Properties

method String The HTTP method to use (if omitted, defaults to "GET").
headers Object The request headers.
body String The request body.