Calling an API as a non-blocking call JavaScript

Question

I am building a todo-list like feature which adds a task when Enter is pressed on an input task field. The Enter calls an API (add Task) which takes approx 200ms to execute. Since this is blocking call it hinders my code to execute fully and affects the usability of my system. Here is a code example of what I am trying to achieve.

handleChange (event) {

          if (e.key === 'Enter') {

            targetTaskId = e.target.getAttribute("data-downlink")   
            this.props.addTask(this.props.currentProject.id, '', '', taskId, this.props.currentTasks) //this function calls an add Task API which halts my system momentarily

            targetSelector  = targetTaskId
            $('#' + targetSelector).focus()
            this.setState({activeTask: targetSelector})
            highlightActiveComponent(targetTaskId)

   } 

}

//addTask

   export function addTask (project_id, taskName, taskNotes, upLink, taskList) {
      console.log('Add Task API call', project_id, taskName, taskNotes, upLink)
      return (dispatch) => {
        callApi('tasks?projectId=' + project_id + '&name=' + taskName + '&notes=' + taskNotes + '&upLink=' + upLink, 'post')
          .then(res => {
            console.log('Response new task ', res)
            let newTask = {name: res.name, id: res.id, notes: res.notes, upLink: upLink, projectId: project_id, assignee: 0, completed: 0, tags: [], isLiked: false, stories: [], likes: [], downLink: res.downLink}
            let newTaskList = addTaskToTaskList(taskList, upLink, newTask)
            dispatch(updateTasks({currentTasks: newTaskList}))
            dispatch({ type: 'SET_ACTIVE_TASK_ID', payload: res.id })

          })
      }
   }

//Fetch

export const API_URL = 'https://clients.rohan.axcelmedia.ca/v1'

export default function callApi (endpoint, method = 'get', body) {
  let headers = {
    'Accept': 'application/json',
    'Content-Type' : 'application/json'
  }

  if (auth.loggedIn()) {
    headers = _.merge(headers, {
      Authorization: `Bearer ${auth.getToken()}`
    })
  }
  return fetch(`${API_URL}/${endpoint}`, {
    headers,
    method,
    body: JSON.stringify(body)
  }).then(response => {

    return response
  }).then(response => response.json().then(json => ({ json, response })))
    .then(({ json, response }) => {
      if (!response.ok) {
        return Promise.reject(json)
      }
      return json
    })
    .then(
      response => response,
      error => error
    )
}

Add Task to tasklist

    export function addTaskToTaskList(tasks, upLink, newTask){
        updateTaskDownLink(tasks, newTask.upLink, newTask.id)
        updateTaskUpLink(tasks, newTask.downLink, newTask.id)
        if(upLink == 0){
            tasks.unshift(newTask)
            // console.log("Added in the start", tasks)
            return JSON.parse(JSON.stringify(tasks))
        }
        let myIndex = getIndexOfTaskById(tasks, upLink)
        console.log("Added the new task from helper", myIndex)
        if (myIndex) {
          console.log("Added the new task")
          tasks.splice(myIndex + 1, 0, newTask);
          // console.log("New Task List", JSON.parse(JSON.stringify(tasks)))
        }

        return JSON.parse(JSON.stringify(tasks))
    }

  export function updateTaskUpLink(tasks, taskId, upLink){
      tasks.forEach(function(element, index) {
        if(element.id == taskId) { element.upLink = upLink }
      });

      return tasks
    }

    export function updateTaskDownLink(tasks, taskId, downLink){
        tasks.forEach(function(element, index) {
            if(element.id == taskId) { element.downLink = downLink }
        });

        return tasks
    }

My question is, is there anyway to call this API in a non-blocking fashion so that my code continues to execute and when the response from the api is received my cursor moves to the new task in a seamless manner. Any help would be appreciated. Thankyou [EDIT] : Added fetch function to demonstrate the async calls

Answer 1

You should use something like Fetch API for call the API in a non-blocking way:

fetch("/api/v1/endpoint/5/", {
    method: "get",
    credentials: "same-origin",
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
    }
}).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log("Data is ok", data);
}).catch(function(ex) {
    console.log("parsing failed", ex);
});

console.log("Ciao!");

The code that shows data in the snippet will be executed only when some data is returned by the server.

This means that in my example the log "Ciao!" will be showed before "Data is ok: ..."

Hope this helps :)

credits for the snippet: https://gist.github.com/marteinn/3785ff3c1a3745ae955c

Answer 2

First of all return JSON.parse(JSON.stringify(tasks)) is redundant, you can just return tasks right there, that will probably fix your speed problem alone. But incase it doesn't.

Your code might be blocking due to this type of thing here

tasks.forEach(function(element, index) {
  if(element.id == taskId) { element.upLink = upLink }
});

return tasks

You iterate over the tasks array for updateTaskDownLink, again for updateTaskUpLink and probably again for getIndexOfTaskById, this is a lot of needless iteration.

Instead of searching through an array of tasks over and over, you should structure your tasks in a map

tasks = {
  "someTaskId": {
    id: "someTaskId",
    upLink: "uplink stuff",
    downLink: "downlink stuff"
  }
}

This way when you go to update the task its really simple and really fast

tasks[taskId].upLink = upLink or tasks[taskId].downLink = downLink

No iterating, no blocking, no problem.

Also, this data structure will make getIndexOfTaskById obsolete! because you already have the key needed to access that task! Hooray!

If you're wondering how to iterate over your tasks structured as a map like that see here