In Ember, AJAX callback should it be wrapped in Ember run loop?

Question

The below statement is from ember guides,

The most common case for using the run loop is integrating with a non-Ember API that includes some sort of asynchronous callback. For example:

DOM update and event callbacks
setTimeout and setInterval callbacks
postMessage and messageChannel event handlers
AJAX callbacks
Websocket callbacks

I usually will do for AJAX request,

Ember.$.ajax(
{
 type: "POST",
 url:"someurl",
 contentType: "application/json",
 success: function(data) {
 //Should I wrap this success callback code in Run loop. or is it safe to leave
 //Here I will set properties to display, I might call sendAction/send to communicate with parent.
 }
})

I haven't faced any problem with that but sometime rendering is taking too much time after I change data in callback ?. does any one face that issue ?

Should I use ember-ajax addon to wrap success callback in Ember run loop?.

PS: Below is from ember guides, you should wrap any non-Ember async callbacks in Ember.run. If you don't, Ember will try to approximate a beginning and end for you. Relying on autoruns is not a rigorous or efficient way to use the run loop.

i haven't been doing that with Ember.$.ajax and haven't noticed any issues. it certainly wouldn't hurt anything if you were to do that. — Christopher Milne
as far as I know Ember creates a run loop for you. you can check what I mean in the following twiddle. There are two identical routes, one with run loop and one without it. Since run loops in tests are automatically disabled; the one without run loop gives an error indicating it needs a run loop. However, in terms of application behavior nothing seems to be different. I personally do it when test complains. — feanor07
Since Ember CLI 3.0, $.ajax not wrapped in Ember run loop will generate errors when building: error Don't use jQuery without Ember Run Loop ember/jquery-ember-run. — pusle

Sagar Gala Sagar Gala · Accepted Answer · 2018-10-11T21:50:22

This worked for me. Basically, you just need to wrap the actions/callbacks in run.bind loop. https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/jquery-ember-run.md

import $ from 'jquery';
import { bind } from '@ember/runloop';

$.ajax({
  type: "POST",
  url:"someurl",
  contentType: "application/json",
}).then(bind(this, (data) => {
  // Handle success here
});

In Ember, AJAX callback should it be wrapped in Ember run loop?

1 Answers