STEP-5 Creating Plugin and Axios request

1. As an example of using Axios we going to display ScandiPWA version at Website Footer For that create FooterComponent.plugin.js file in [EXTENSION]/src/plugin folder

scandipwa/packages/@scandipwa/version/src/plugin/FooterComponent.plugin.js

import axios from 'axios';

import ContentWrapper from 'Component/ContentWrapper';

export const VERSION_ROUTE = '/scandipwa/version';

const getVersion = (instance) => {
    axios.get(VERSION_ROUTE).then((response) => {
        instance.setState({ version: response.data });
        instance.forceUpdate();
    });
};

const state = (original) => ({
    ...original,
    version: ''
});

const componentDidMount = (args, callback, instance) => {
    callback(...args);
    getVersion(instance);
};

const renderCopyrightContent = (args, callback, instance) => {
    const { version } = instance.state;

    return (
        <>
            { callback(...args) }
            <ContentWrapper
              mix={ { block: 'Footer', elem: 'CopyrightContentWrapper' } }
              wrapperMix={ { block: 'Footer', elem: 'CopyrightContent' } }
              label=""
            >
                <span block="Footer" elem="Copyright">
                    { version }
                </span>
            </ContentWrapper>
        </>
    );
};

export default {
    'Component/Footer/Component': {
        'member-function': {
            componentDidMount,
            renderCopyrightContent
        },
        'member-property': {
            state
        }
    }
};

Useful Materials Axios Extension Plugins Templates