Service API call blocks UI in UITableViewController - ios

Question

I have a UITableViewController and have to load a not so big amount of data on start. In my viewDidLoad, I use a different queue to send the request:
override func viewDidLoad() {
super.viewDidLoad()
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), {
var data = self.getStoresData()
dispatch_async(dispatch_get_main_queue(), {
self.parseStoresData(data)
self.resultsController = PartnerStore.getAllStores()
});
});
}
And these are the methods:
func getStoresData() -> [NSDictionary]
{
var responseData = [NSDictionary]()
self.refreshControl.beginRefreshing()
AppDelegate.appDelegate().httpRequestOperationManager?.GET(
"partner_stores/",
parameters: nil,
success: { (operation: AFHTTPRequestOperation!, responseObject: AnyObject!) in
self.tableView.reloadData();
println("RESPONSE OBJECT IN GET PARTNER STORES: \(responseObject)") },
failure: { (operation: AFHTTPRequestOperation!, error: NSError!) in
println("FAIL IN GET PARTNER STORES: \(error)") })
self.refreshControl.endRefreshing()
return responseData
}
func parseStoresData(storesData: [NSDictionary])
{
for storeDict in storesData {
// just inserts a new object to CoreData
PartnerStore.addNewStore(storeDict)
}
}
The problem is (I think) that the API call is async, so the two functions in dispatch_async are executed before the data is downloaded from the server. But if I put everything in the success block of the GET call, it takes a lot of time and the whole UI is blocked. What is the best way to to the server call, without blocking the UI thread ?

Answer 1

You are right about the two calls in the dispatch_async in viewDidLoad being called before your GET request completes; that's a problem. You also had the right idea when you said you tried putting everything in the success block; that's where it should go flow wise. There are a few other things that need to be moved around as well though.
One good way to go about handling UI updates is to have separate functions for your UI updates and your data fetch. Doing it that way means we'll need to pass a callback to your getStoresData function and then call it appropriately in your GET function's success and error blocks. That will let us know when the data fetch is complete so that we can finish the UI updates. We'll also want to move the dispatch to the background queue out of viewDidLoad and in to getStoresData.
So, lets pull any UI changes out of getStoresData and move that dispatch:
func getStoresData(callback: (error: NSError?) -> Void) {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), {
// ... do any setup ...
AppDelegate.appDelegate().httpRequestOperationManager?.GET(
// ... other GET parameters ...
success: { (operation: AFHTTPRequestOperation!, responseObject: AnyObject!) in
var responseData = [NSDictionary]()
// do what you need to convert responseObject to responseData
// then...
// NOTE: we'll dispatch the the main thread here because parseStoresData deals with CoreData.
// This dispatch could be done in parseStoresData itself but
// a callback function would need to be added to it as well
// in that case.
dispatch_async(dispatch_get_main_queue(), {
self.parseStoresData(responseData)
// The response has been dealt with, so call the callback
callback(error: nil)
});
},
failure: { (operation: AFHTTPRequestOperation!, error: NSError!) in
// There was an error, so call the callback with the error object
callback(error: error)
}
)
})
}
Now let's make that new function to handle updating the UI so that the data updates are decoupled from the UI updates. In this function we'll first start the refresh control and call getStoresData. Then, when getStoresData finishes, update the table view and stop the refresh control.
func reloadData() {
// start the refresh control on the main thread so the user knows we're updating
dispatch_async(dispatch_get_main_queue(), {
self.refreshControl.beginRefreshing()
})
// do the actual data fetch...
// (remember this will dispatch to a background thread on its own now)
getStoresData({
(error: NSError?) -> Void in
// since this callback could be called from any thread,
// make sure to dispatch back to the main UI thread to finish the UI updates
dispatch_async(dispatch_get_main_queue(), {
if let actualError = error {
// update the UI appropriately for the error
} else {
// update the data in the table view and reload it
self.resultsController = PartnerStore.getAllStores()
self.tableView.reloadData();
}
// we're done; stop the refresh control
self.refreshControl.endRefreshing()
})
})
}
That makes your viewDidLoad function very simple now:
override func viewDidLoad() {
super.viewDidLoad()
reloadData()
}
This also makes it easier to implement things like pull to refresh since you can simply call reloadData when the user triggers the refresh instead of duplicating the UI update code all over the place.