Как переписать данный код на async/await?

Question

[Dmitry]

deleteAll() {
	const ids = this.data.map(item => item.id)

	const deletePromises = ids.map(id => {
		return new Promise(resolve => {
			return this.delete(id).then(data => resolve(data))
		})
	})

	return new Promise(resolve => {
		return Promise.all(deletePromises).then(() => {
			runInAction(() => {
				this.data = []
				resolve()
			})
		})
	})
}

Переписал так:

deleteAll() {
	const ids = this.data.map(item => item.id)

	const deletePromises = ids.map(id => {
		return new Promise(async (resolve) => {
			await this.delete(id)
			resolve(true)
		})
	})

	return new Promise(async (resolve) => {
		await Promise.all(deletePromises)
		runInAction(() => {
			this.data = []
			resolve()
		})
	})
}

Код работает, но профита что-то никакого не ощутил, может можно написать получше?

Comments

[Lynn «Кофеман»]

В вашем коде все new Promise лишние

И в первом и во втором

[Алексей Ярков]

профита что-то никакого не ощутил

А что должно было по вашему произойти?

[Dmitry]

Алексей Тен, понял, спасибо!

[WapSter]

Так ты используешь промисы к чему ещё к ним задержку писать?

[Lynn «Кофеман»]

А что за runInAction?

[Dmitry]

Алексей Тен, runInAction - это метод mobx, который выполняет асинхронный код внутри action. Можете проверить сейчас, правильно ли я написал...

@action async deleteAll() {
	const ids = this.data.map(product => product.id)

	const deletePromises = ids.map(async (id) => {
		await this.api.delete(id)
	})

	await Promise.all(deletePromises)
	runInAction(() => {
		this.data = []
	})
}

[Lynn «Кофеман»]

Не совсем. У вас опять получилось ненужная вложенность промисов.

Answer 1

[Lynn «Кофеман»]

const deletePromises = ids.map(id => {
  return new Promise(resolve => {
    return this.delete(id).then(data => resolve(data))
  });
});

Вот это бессмысленное использование new Promise. this.delete(id) это уже промис, так что это код переписываем в

const deletePromises = this.data.map(item => this.delete(item.id));

Дальше то же самое.

return Promise.all(deletePromises).then(() => {
  runInAction(() => {
    this.data = [];
  });
});

А теперь перепишем это на async/await

async deleteAll() {
  const deletePromises = this.data.map(item => this.delete(item.id));
  await Promise.all(deletePromises);
  runInAction(() => {
    this.data = [];
  });
}

UPD: почитал https://mobx.js.org/best/actions.html#async-await и исправил

Comments

[Dmitry]

Алексей, спасибо большое за помощь. Но теперь я получаю ошибку "util is not defined".
Мне не ловко тревожить вас своими детскими вопросами, поэтому готов оплатить консультацию, чтобы вы до конца помогли мне с этой функцией.
Если есть желание и время - оставьте свой email.
Спасибо еще раз.

[Lynn «Кофеман»]

Вообще, судя по тому, что я увидел в документации mobx, промизифаить runInAction не нужно.

[Lynn «Кофеман»]

Dmitry, Поправил ответ, убрал promisify

[Dmitry]

Алексей Тен, да, без promisify все работает, спасибо огромное за уделенное время.