Ориентация интервью: Async/Await вместо Promise.all()

ECMAScript 6
Ориентация интервью: Async/Await вместо Promise.all()

новая приправа, новый вкус

Эта статья основана на вопросах собеседования и не рекомендуется применять в проекте. Если есть какая-либо ошибка, добро пожаловать

основная концепция

Promise

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

function resolveUnderThreeSeconds(delay) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => resolve('success'), delay)
    setTimeout(() => reject('fail'), 3000)
  })
}

resolveUnderThreeSeconds(2000)
  .then(res => {
    console.log('res', res)
  })
  .catch(err => {
    console.log('err', err)
  })

При написании асинхронного кода одна из двух задач может зависеть от результатов другой, поэтому две задачи должны выполняться последовательно.

Promise.all()метод принимаетPromiseмассив, все в массивеPromiseПосле успешного выполнения вернуть каждый элемент в соответствии с поступающим заказомPromiseданные результата, один из которых отклонен, он будет приостановлен и вернет сообщение об ошибке

const p1 = Promise.reject('failed')
const p2 = Promise.resolve('success')
const p3 = Promise.resolve('success')
const p = Promise.all([p1, p2, p3]).catch(err => console.log(err))

Async/Await

Async Functions Комбинируйте реализацию на основе обещания с синхронизацией стиля генератора

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();

выполнить

Функциональный анализ

Жизненноважный:Promise.all()входящийpromiseмассив, все в массивеPromiseПосле успешного выполнения вернуть каждый элемент в соответствии с поступающим заказомPromiseданные результата, один из которых отклоняется, он приостанавливается и возвращается сообщение об ошибке

запись массиваasyncфункция, циклasync/awaitВыполните введенную функцию массива, затем сформируйте результат функции в массив и, наконец, верните массив

try/catchдоступныйasyncвнутри функции любойawaitошибка, может удовлетворить其中一个被拒绝，即会暂停，并返回错误信息функция

async function asyncAlls(jobs) {
  try {
    // 循环执行
    let results = jobs.map(async job => await job)
    let res = []
    // 组合数组
    for (const result of results) {
      res.push(await result)
    }
    return res
  } catch (error) {
    throw new Error(error)
  }
}

Пример дисплея


function doJob(x, sec) {
  if (!x) {
    throw new Error('test error')
  }
  return new Promise(resolve => {
    console.log('Start: ' + x)
    setTimeout(() => {
      console.log('End: ' + x)
      resolve(x)
    }, sec * 100)
  })
}

async function asyncAlls(jobs) {
  try {
    let results = jobs.map(async job => await job)
    let res = []
    for (const result of results) {
      res.push(await result)
    }
    return res
  } catch (error) {
    throw new Error(error)
  }
}
(async function() {
  try {
    const all1 = await asyncAlls([doJob(1, 1), doJob(2, 1), doJob(0, 1), doJob(4, 1)])
    console.log('all1', all1)
  } catch (error) {
    console.log('0', error)
  }
  try {
    const all2 = await asyncAlls([doJob(5, 1), doJob(6, 1), doJob(7, 1), doJob(8, 1)])
    console.log('all2', all2)
  } catch (error) {
    console.log('1', error)
  }
})()

Суммировать

Идея этой статьи возникла из вопроса интервью. Из любопытства потребовалось некоторое время, чтобы реализовать это. В этот период было много вещей, которые я не понимал, и я также советовался со многими друзьями. Спасибо для развеивания ваших сомнений.

Примеры в этой статье предназначены только для обучения, а приложения и практические проекты не рекомендуются.

Спасибо за прочтение

Ссылаться на

оригинальное чтение

Категории