How to use the @jenkins-cd/blueocean-core-js.Fetch.fetchJSON function in @jenkins-cd/blueocean-core-js

fetch(url, fetchOptions) {
        return Fetch.fetchJSON(url, { fetchOptions })
            .then(data => capabilityAugmenter.augmentCapabilities(data))
            .catch(error => {
                const responseBody = error.responseBody;
                if (responseBody && responseBody.code && responseBody.message) {
                    ToastService.newToast({
                        style: 'error',
                        caption: t('Favoriting Error'),
                        text: t(responseBody.message),
                    });
                }
                console.error(error); // eslint-disable-line no-console
            });
    }

return dedupe(url, () =>
            Fetch.fetchJSON(url) // Fetch data
            .then(data => augmenter.augmentCapabilities(data))
            .then(successAndFreeze)) // add success field & freeze graph
            .then(

fetchTrendsData(theProps) {
        const { pipeline } = theProps;
        const baseUrl = `${AppConfig.getRestRoot()}/organizations/${AppConfig.getOrganizationName()}/pipelines/${pipeline.fullName}`;

        let fullUrl;

        if (capable(pipeline, MULTIBRANCH_PIPELINE)) {
            const branchName = this._selectedBranch(theProps, pipeline);
            fullUrl = `${baseUrl}/branches/${encodeURIComponent(branchName)}/trends/`;
        } else {
            fullUrl = `${baseUrl}/trends/`;
        }

        Fetch.fetchJSON(fullUrl).then(data => this._loadTrendsSuccess(data));
    }

getRunWithId(pipeline, branch, runId) {
        const fetchOptions = prepareOptions();
        const href = generateDetailUrl(pipeline, branch, runId);
        logger.debug('Fetching href', href);
        return Fetch.fetchJSON(href, { fetchOptions });
    }

        return (dispatch) => Fetch.fetchJSON(url, { fetchOptions })
            .then(data => augmenter.augmentCapabilities(data))
            .then((json) => {
                fetchFlags[actionType] = false;
                return dispatch({
                    ...optional,
                    type: actionType,
                    payload: json,
                });
            })
            .catch((error) => {
                const responseBody = error.responseBody;
                if (responseBody && responseBody.code && responseBody.message) {
                    ToastService.newToast({
                        style: 'error',
                        caption: translator('Favoriting Error'),
                        text: translator(responseBody.message),

updateTrends(trends, extensions) {
        extensions.forEach(trendExt => {
            this.extensions[trendExt.trendId] = trendExt.componentClass;
        });

        this.trends = trends;

        const rowsMap = {};

        for (const trend of trends) {
            const rowsUrl = trend._links && trend._links.rows && trend._links.rows.href;

            if (rowsUrl) {
                Fetch.fetchJSON(rowsUrl).then(rows => this._updateTrendRows(trend, rows));
            }

            rowsMap[trend.id] = [];
        }

        this.rowsMap = observable(rowsMap);
    }

componentWillMount() {
        const { onStatus, dialog, onComplete } = this.props;
        if (onStatus) {
            onStatus('promptLoading');
        }
        Fetch.fetchJSON(this.restOrgPrefix + '/user/publickey/').then(credential => {
            this.setState({ credential });
            if (onStatus) {
                onStatus('promptReady');
            }
            if (!dialog) {
                onComplete(credential);
            }
        });
    }