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.