Traditional way of doing asnyc method in javascript

Question

I was searching online on how we create the traditional way of doing async function in Javascript but it wasn't available. I have implemented a promise function in my program, however the software that I am using (tableu) to create all custom styling does not support ES5-ES8 and async functions, as this will throw an error, so I was wondering if this is possible.


function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 500);
  })
}

async function result() {
  await promise();
}

result().then(render => {
  customStyle()
});

All of my code shown is working fine. I'm wondering how can I convert this to the old way of doing async functions. Is this possible or is it only available in ES8?

Altair Jorge Fernandes · Answer

To use promises the tradicional way, you have to replace the await and use .then(()=> ...). I'll try to show a snippet here to help you to understood.
The code that you have shown does not need the async or await, it goes well like that


function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('resolved')
      resolve()
    }, 500);
  })
}

promise().then(render => {
  customStyle()
});

Here i'll show you a code that have a good use of it and then I'll convert it:


function callSomeService() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called')
      resolve({ idOfSomething: 1 })
    }, 2000);
  })
}

function callAnotherServiceUsingTheDataOfThePreviousCall(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called with', data)
      resolve(['potato 1', 'potato 2', 'potato 3'])
    }, 2000);
  })
}

async function result() {
  const serviceResponse = await callSomeService();
  const arrayOfPotatos = await callAnotherServiceUsingTheDataOfThePreviousCall(serviceResponse);
  
  return arrayOfPotatos.map((potato, index) => `${index} - ${potato}`)
}

result().then(arrayOfPotatos => {
  arrayOfPotatos.forEach(potato => console.log(potato))
});

Now I'll convert it to not use async or await, but still using promises.


function callSomeService() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called')
      resolve({ idOfSomething: 1 })
    }, 2000)
  })
}

function callAnotherServiceUsingTheDataOfThePreviousCall(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called with', data)
      resolve(['potato 1', 'potato 2', 'potato 3'])
    }, 2000)
  })
}

function result() {
  return callSomeService().then(serviceResponse => {
    return callAnotherServiceUsingTheDataOfThePreviousCall(
      serviceResponse
    ).then(arrayOfPotatos => {
      return arrayOfPotatos.map((potato, index) => `${index} - ${potato}`)
    })
  })
}

result().then(arrayOfPotatos => {
  arrayOfPotatos.forEach(potato => console.log(potato))
})

Those two last codes does the same thing, but the second use async and await and the third does not. Async and await are just a syntax sugar to use promises.
I expect that will help you.

tyler-tm · Answer

Callbacks are the non-Promise or async/await way of doing this, and are basically how those things work under the hood.
Here's a simple example by modifying your snippet:
function promise(callback) {
    setTimeout(() => callback(), 500);
}

function result() {
    promise(callback);
}

function callback() {
    customStyle();
};

Instead of result being an async function that you can await elsewhere in your code, it could also take a callback argument, like promise, that you would pass it when it's invoked. The implementation of that callback function would be like the then of an actual Promise.
Now you can see why the Promise API and async/await were such nice improvements to the spec.

Traditional way of doing asnyc method in javascript

2 Answers

Add your own answers!

Ask a Question