getting different response for javascript and jQuery ajax

i have written one aja in jQuery , which is folowing

            settings = $.extend({
                method: 'GET',
                url: decodedUrl,
                dataType: 'json',
                cache: false,
                contentType: 'application/json',
                data: {
                    aln: '✓'
                },
                showLoader: true,
                pushState: pushState
            }, settings);

            //onDone = onDone || this.onDone;

            $.ajax(settings).done(function (response) {
                console.log('response : ', response);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            });

is returning following response :

response :  response :  {action: 'catalog_category_view', list: '                <div class="toolbar toolbar-produc…t">per page</span>\n</div>\n            </div>\n    ', filters: '    <div class="block filter" id="layered-filter-b…    </div>\n                    </div>\n    </div>\n', state: '    <ul class="filter-active">\n            <li>\n  …pan>Clear All</span>\n        </a>\n    <li>\n</ul>\n', qty: 24}action: "catalog_category_view"filters: "    <div class=\"block filter\" id=\"layered-filtlist: "                <div class=\"toolbar toolbar-prodqty: 24state: "    <ul class=\"filter-active\">\n            <li>\n            <span class=\"filter-label\">\n                Category            </span>\n                                <div class=\"state-item\">\n                <span class=\"state-item-name\" title=\"Jackets\">\n                    Jackets                </span>\n                <span class=\"state-item-remove\">\n                    <span class=\"state-item-icon-cancel\"></span>\n                </span>\n                <a class=\"state-item-remove-url\" href=\"{base_url}/women/tops-women.html\"></a>\n            </div>\n                </li>\n        <li>\n        <a class=\"filter-active-item-clear-all\"\n           title=\"Clear&#x20;All\"\n           href=\"{base_url}/women/tops-women.html\">\n            <span>Clear All</span>\n        </a>\n    <li>\n</ul>\n"[[Prototype]]: Object

I want to implement same ajax using java-script, so I have performed following

const dataParams = {
            aln: encodeURIComponent('✓'),
            _: Date.now() 
        };

var requestOptions = {
            method: 'GET',
            url: finalUrl, 
            dataType: 'json',
            cache: 'no-cache', 
            contentType: 'application/json',
            data: dataParams,
            showLoader: true,
            pushState: self.config.pushState,
            mode: 'cors'
        };

        fetch(finalUrl, requestOptions)
        .then(response => {  
            console.log('Response :', response);
        })
        .catch(error => {
            console.log("error : ",error); 
        });

I am getting following response :

Response {type: 'basic', url: '{base_url}/women/tops-women.html?climate=201?aln=%E2%9C%93', redirected: false, status: 200, ok: true, …}

help me to understand why I am getting different responses, while the ajax is similar.