Execute a function after $.ajax success without putting it in a callback directly

Question

I have this function where many parts of my code call it.

function test() {
  $.ajax({
    url : url,
    type : 'GET',
    success : {
      verifyID();
      verifyName();
      verifyBlah();
    }
  });
}

and I have this other function:

addProductCart(productID);

Before I call addProductCart(), I need to call test function, but, other processes call test function.

I'd like to do this:

test() ---> if test ok (success) ----> addProductCart()

But I can't set my function (addProductCart) into success test function because, like I said, many other processes call test function.

How can I do this?

probably need to see the other code as well, to see what the test function is doing, and what the ones calling them is using test for — A. L, Apr 12 '17 at 03:52
may be this can help you http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call#answer-14220323 — Thanh Nguyen, Apr 12 '17 at 03:53
What about making the test function return a boolean and just put an if statement in the success block? Not sure if I understand correctly the question. — rpabood, Apr 12 '17 at 03:54
The promises solution shown below is probably best, but you could also modify `test()` to accept optional arguments that specify additional callbacks to be run. — nnnnnn, Apr 12 '17 at 04:28

Shaunak · Accepted Answer · 2017-04-12T04:21:20.633

6

Use Promises!

Return a promise from the test function like so:

function test() {
  return $.ajax({ // <----- Notice the return statement here
    url : url,
    type : 'GET',
    success : {
      verifyID();
      verifyName();
      verifyBlah();
    }
  });
}

When you need to use this function to test something and execute another piece of code when this passes you can do :

test().then(function(data, textStatus){
  //do thing 1
  addProductCart()
  // you can use data or textStatus returned by your ajax function here too!
});

test(someParam).then(function(data, textStatus){ // <--- You can even pass parameters to test function like here, and make it do different ajax call based on your param
  //do thing 2
});

For more details on how this works see the jQuery docs for $.ajax. function

Here's a great tutorial on concept of JavaScript Promises to get you started if you are unfamiliar with them.

edited Apr 12 '17 at 04:21

answered Apr 12 '17 at 04:01

Shaunak

17,377
5
53
84

Where is the promise returned from the test function? – nospi Apr 12 '17 at 04:03
$.ajax returns the promise. If you read my answer, I have the same test function as OP but have a return statement before that. – Shaunak Apr 12 '17 at 04:04
Ah right that's nice, so your function remains the same, you return the ajax object and then use it differently depending on what you need done no the callback – nospi Apr 12 '17 at 04:05
I was thrown off by test(someParam) in the next line, that's irrelevant right? The function doesn't accept any arguments as is? – nospi Apr 12 '17 at 04:07
1

not as is, but its goes to show that you could if you wanted to pass a parameter, and change same test() function's behavior based on a param. Comes in handy to keep the code DRY and reuse the function. – Shaunak Apr 12 '17 at 04:10
maybe `async:false` would help? – Manoz Apr 12 '17 at 04:22

Execute a function after $.ajax success without putting it in a callback directly

1 Answers1