Skip to content

HTTPRequesterAPI

Api name: HTTPRequesterApi.
API used to make HTTP requests.

classDiagram
    HTTPRequesterAPI <|-- IRequestOptions
    IRequestOptions <|-- TRequestRepeatOptions
    IRequestOptions <|-- TRequestCacheOptions
    IRequestOptions <|-- TSanitizeOptions

    class HTTPRequesterAPI {
        + fetch(requestOptions: IRequestOptions) IRequesterFetchItem<T>
    }

    class IRequestOptions {
        + url: string
        + method: string
        + data: FormData | Record<string, unknown> | unknown
        + cancelToken: any
        + repeatOptions: TRequestRepeatOptions
        + cacheOptions: TRequestCacheOptions
        + sanitizeOptions:  TSanitizeOptions
    }

    class TRequestRepeatOptions {
        + maxAttempts: number
        + attemptDelayInMs: number
        + repeatRequestOnStatusCodes: number[]
    }

    class TRequestCacheOptions {
        + type: 'memory' | 'local' | 'session'
        + ttlInMs: number
    }

    class TSanitizeOptions {
        + disable: boolean
    }

Get API

useStorefront(async (storefront) => {
    const httpRequesterApi = await storefront.getApiSync('HTTPRequesterApi');
});
useStorefront((storefront) => {
    const httpRequesterApi = storefront.getApiSync('HTTPRequesterApi');
});

Methods

Examples

Get product data from the storefront.

useStorefront(async (storefront) => {
    const httpRequesterApi = storefront.getApiSync('HTTPRequesterApi');

    const requestOptions = {
        url: 'https://example.com/webapi/front/pl_PL/products/PLN/16',
        method: 'get'
    };

    const fetchItem = httpRequesterApi.fetch(requestOptions);
    const response = await fetchItem.response;
    const product = response.data;
});

Cancel request when certain condition is met.

useStorefront(async (storefront) => {
    const httpRequesterApi = storefront.getApiSync('HTTPRequesterApi');

    const requestOptions = {
        url: 'https://example.com/webapi/front/shop/defaults/',
        method: 'get'
    };

    const fetchItem = httpRequesterApi.fetch(requestOptions);
    const shouldCancelRequest = true;

    if (shouldCancelRequest) {
        fetchItem.cancelRequest();
    } else {
        const response = await fetchItem.response;
        const defaultOptions = response.data;
    }
});