Как выполнить последовательно функции и вернуть результат?

Question

class Parse{
  get(){

    let arr = {
      'first'  : 'Not change',
      'second' : 'Not change'
    }

    // Функция 1
    setTimeout(()=>{
      console.log('Firstй')
      arr.pop = 'change'
    }, 5000)

    // Функция 2
    setTimeout(()=>{
      console.log('Second')
      arr.sdd = 'change'
    }, 3000)

    return arr
  }
}

let pars = new Parse()
arr = pars.get()
console.log(arr)

Нужно последовательно выполнить две асинхронные функции и вернуть результат?

Answer 1

Наиболее близко к коду вопроса

Чтобы получить результат асинхронно можно возвращать из функции Promise и брать результат от него:

pars.get().then(r=>console.log(r));

здесь pars.get возвращает Promise и в методе then определяется функция, которая будет вызвана, когда промис разрешится. При этом в параметре этой функции r будет лежать аргумент с которым была вызвана resolve, т.е массив arr:

resolve(arr);

В функции get необходимо вернуть новый промис. При создании промиса ему передается функция, которая будет выполняться асинхронно. По завершении выполнения требуется вызвать resolve и передать этому вызову результат:

return new Promise((resolve) =>{
                setTimeout(()=>{
                    console.log('First')
                    arr.pop = 'change'
                    setTimeout(()=>{
                        console.log('Second')
                        arr.sdd = 'change'
                        resolve(arr);
                    }, 3000);
                }, 5000);
            });

Рабочий вариант может выглядить так:

    class Parse{
        get(){
            let arr = {
                'first'  : 'Not change',
                'second' : 'Not change'
            }
        return new Promise((resolve) =>{
            setTimeout(()=>{
                console.log('First')
                arr.pop = 'change'
                setTimeout(()=>{
                    console.log('Second')
                    arr.sdd = 'change'
                    resolve(arr);
                }, 3000);
            }, 5000);
        });
    }
}

let pars = new Parse()
pars.get().then(r=&gt;console.log(r));</code></pre>

Общий вариант последовательного вызова

Создается несколько асинхронных функций. Каждая асинхронная функция должна возвращать Promise. Промисе должен резолвиться результатом работы асинхронной функции. Например, следующая функция возвращает промис, "внутри" которого происходит получение html страницы и промис резолвится с аргументом, представляющим собой содержимое страницы:

function getHtml() {
    return new Promise((resolve, reject) => {
        const html = "html content";
        resolve(html);
    });
}

Promise имеет метод then. Этот метод принимает как минимум один параметр - функцию, которая будет вызвана, когда в промисе будет вызвана resolve. Эта функция параметром принимает значение с которым был вызван resolve. В этой функции можно обработать результат асинхронной функции, и если необходимо, то запустить новую асинхронную функцию и вернуть ее результат (т.е. новый Promise):

getHtml()
    .then(r => {
        // делаем что-то с содержимым html
        return getImage(r);
    })

далее можно соединять вызовы then по цепочке, последовательно обрабатывая результаты асинхронных функций. Если требуется, например, получить html страницу, на основе html получить изображение, содержащее текст и распознать текст, то вся цепочка может выглядеть так:

function getHtml() {
 return new Promise((resolve, reject) => {
  const html = "html content";
  resolve(html);
 });
}
function getImage() {
 return new Promise((resolve, reject) => {
  const image = "image";
  resolve(image);
 });
}
function recognize() {
 return new Promise((resolve, reject) => {
  const text = "text";
  resolve(text);
 });
}
getHtml()
 .then(r => {
  // делаем что-то с содержимым html
  return getImage(r);
 })
 .then(r => {
  // делаем что-то с изображением
  return recognize(r);
 })
 .then(r => {
  // просто выводим результат
  console.log(result: ${r});
 })
 .catch(e => {
  // что-то пошло не так
  console.log(error: ${e});
 });