How to get customerData in js uiComponent asynchronously?

This is the usual way to get customerData on frontend.

define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (Component, customerData) {
    'use strict';

    return Component.extend({
        initialize: function () {
            this._super();

            this.firstname = customerData.get('customer')().firstname;
        }
    });
});

Problem: oth the first load of the page, when mage-cache-storage in local storage is cleared, customerData.get('customer')().firstname returns undefined. And at this moment, request to server is sent, but js doesn’t wait for the response, and the variable is undefined.

I guess it has to be done asynchronously. But how to do it correctly?

I have found these stack questions, but the solutions are the same as mine. Am I missing something?

1. How to call customerData js in phtml on a specific page after page load

2. Magento2 RequireJS CustomerData is empty at page load, but populated once page finishes loading?