Here is a simple and a bit silly example of using promises. In real life we could just move the logic into done and fail functions which are promises themselves but for the sake of explaining how promises work we are going to do this example.

you could see the example here.

 var promise = new Promise(function(resolveFunc, rejectFunc) {

    $.ajax({
      url: "https://www.toni-develops.com/external-files/examples/service-workers/delayed-response.php",
    })
      .done(function( data ) {
        resolveFunc(data);
      })
      .fail(function(error) {
          rejectFunc(error);
      });

});

promise.then(
    function(result) { // resolve func
        console.log('Success! Data: ', result);
}, function(error) {    // reject function
    console.log("Error! ", error);
})

console.log("Promise was called, and once it's fulfilled the code inside the 'then' function will be executed!");

What’s happening here:
– Line 1 creates a new promise, which does AJAX request and calls done or fail functions.
– If execution is successful and done function is called, it also invokes resolveFunc passing the result data.
– Line15 is where the promise has been called, and the bodies of resolveFunc (line 16) and  rejectFunc (line 18) are defined and passed to the promise.

Run the code and you should see first the message “Promise was called, and once it’s fulfilled the code inside the ‘then’ function will be executed!”
Five seconds later the newly fetched content will be shown since the service intentionally takes 5 seconds to return the data for testing purposes.

What if we want to make it much easier? Let’s use async and await

async function fetchData() {
    var result = await fetch('https://www.toni-develops.com/external-files/examples/service-workers/delayed-response.php');
    return result;
}


(async () => {
    var r = await fetchData();
    console.log("ONE::", r);    
    console.log("DONE !");
})();