Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between Promise and AJAX?

Both promises and AJAX calls are asynchronous operations. A GET/POST request could be made with both. << Edit: that's a WRONG statement

So what's the difference between them? And when would be best to use one instead of the other?

Also, one more thing:

Recently I encountered a promise which had an AJAX in its body. Why put an async operation inside an async operation? That's like putting a bread loaf in a bread sandwich.

function threadsGet() { return new Promise((resolve, reject) => {   $.getJSON('api/threads')     .done(resolve)     .fail(reject);     }) } 

jQuery is used here. And the AJAX call has Promise behavior and properties. I didn't get that earlier but here are my thoughts: We can do something in the Promise. Then use the AJAX call and in the done function pass the resolved Promise logic. Specifically in this example there is none.

Now I see that I had confused both. They're pretty much 2 different things. Just because they're asynchronous, doesn't mean they're interchangeable.

==============

EDIT 2: Just some materials I found useful:

Promise Anti-Patterns

like image 865
Bruno Avatar asked Sep 28 '16 15:09

Bruno


People also ask

Is jQuery AJAX a promise?

jQuery have promises implemented with their AJAX methods. In a nutshell, they are utilities that allow us to work with events that have completed or put them in queues or chain them – all of that good stuff. In our case, we need a “promise“. This allows us to interact with our AJAX requests – well outside our $.

Does an AJAX request return a promise?

ajax returns a promise object, so that we don't have to pass a callback function.

Is AJAX and async the same?

AJAX: Synchronous or Asynchronous Synchronously, in which the script stops and waits for the server to send back a reply before continuing. Asynchronously, in which the script allows the page to continue to be processed and handles the reply if and when it arrives.

What is the difference between promise and callback?

Callbacks are functions passed as arguments into other functions to make sure mandatory variables are available within the callback-function's scope. Promises are placeholder objects for data that's available in the future.


1 Answers

You are confused about promises and Ajax calls. They are kind of like apples and knives. You can cut an apple with knife and the knife is a tool that can be applied to an apple, but the two are very different things.

Promises are a tool for managing asynchronous operations. They keep track of when asynchronous operations complete and what their results are and let you coordinate that completion and those results (including error conditions) with other code or other asynchronous operations. They aren't actually asynchronous operations in themselves. An Ajax call is a specific asynchronous operation that can be used with with a traditional callback interface or wrapped in a promise interface.

So what's the difference between them? And when would be best to use one instead of the other?

An Ajax call is a specific type of asynchronous operation. You can make an Ajax call either with a traditional callback using the XMLHttpRequest interface or you can make an Ajax call (in modern browsers), using a promise with the fetch() interface.

Recently I encountered a promise which had an AJAX in its body. Why put an async operation inside an async operation? That's like putting a bread loaf in a bread sandwich.

You didn't show the specific code you were talking about, but sometimes you want to start async operation 1 and then when that async operation is done, you want to them start async operation 2 (often using the results of the first one). In that case, you will typically nest one inside the other.


Your code example here:

function threadsGet() {     return new Promise((resolve, reject) => {       $.getJSON('api/threads')         .done(resolve)         .fail(reject);       }) } 

is considered a promise anti-pattern. There's no reason to create a new promise here because $.getJSON() already returns a promise which you can return. You can just do this instead:

function threadsGet() {     return $.getJSON('api/threads'); } 

Or, if you want to "cast" the somewhat non-standard jQuery promise to a standard promise, you can do this:

function threadsGet() {     return Promise.resolve($.getJSON('api/threads')); } 
like image 117
jfriend00 Avatar answered Oct 04 '22 06:10

jfriend00