Ajax calls skipping .then method javascript

We are getting information from a 3rd party API.

Below is the code that communicates with the API

function getDistfromSAP(root)
{

var deferred = $.Deferred();
   
   $.ajax({      
   async:false,
   url: root,
   dataType: 'jsonp',
   method: 'GET'
   
    }).then(function(data) {
    
    deferred.resolve(data);
    
    
   }).fail(function(jqXHR, textStatus, err) {
                                        
        console.log("Failed to get JSON");          
        deferred.reject(err);
    });
    
    return deferred.promise();
    
}

Calling the function

var root = "Web API URL"

getDistfromSAP(root).then(function(response){
                            
console.log(response);
                            
var resp = JSON.parse(response.GetQuoteDetailsResult);
                            
                            
},function(error){
                              
console.log(error);
                                            
});

When the function is called for the first time ,.then() part is skipped and the code proceeds further with empty value in the response array “resp” in our example

It then enters the .then() part of the code and required data is received from the API. However the challenge is that it breaks the code if .then() is not executed in the first call resulting in empty values being returned.

Read a lot of articles online pertaining to callbacks , fetch() , However they did not work for our scenario.

Would appreciate if anyone could let me know how this needs to be handled.

Please let me know if you need any other details