Magento2 rewrite javascript file from a core module in a custom module [duplicate]

Question

I have created a custom module that uses the UI component

<uiComponent name="product_listing"/>

Basically, I want to create a javascript file in my module that rewrites/overrides only the fallowing part of that component js file:

vendor/magento/module-ui/view/base/web/js/grid/provider.js:

/**
 * Reloads data with current parameters.
 */
    reload: function () {
        this.trigger('reload');

        if (this.request && this.request.readyState !== 4) {
            this.request.abort();
        }
        console.log(this);
        this.request = $.ajax({
            url: this['update_url'],
            method: 'GET',
            data: this.get('params'),
            dataType: 'json'
        });

        this.request
            .done(this.onReload)
            .error(this.onError);
    },

Can someone please guide me trough how to do that in the best and efficient way ? Thank you!

Answer 1

You can try 'mixins' feature, all you need is to create requireJS module with extended method like this:

default_mixin.js:

define(function () {
    'use strict';

    return function (target) { // target == Result that Magento_Ui/... returns.
        var parent_reload = target.reload;
        target.reload = function () {
            console.log('before reload');
            parent_reload.apply(this, arguments); //call parent reload
            console.log('after reload');
        }
        return target; // new result that all other modules receive 
    };
});

requirejs-config.js:

config: {
    mixins: {
        'Magento_Ui/web/js/grid/provider.js': {  // Target module
            'My_Module/js/payment/default_mixin': true  // Extender module
        }
    }
}