Можно ли подождать, пока выполнится одна асинхронная функция, а затем выполнить другую?

Question

[SecDet]

Есть две функции выполняющие запрос к серверу. Мне нужно подождать,пока выполнится первая,а затем вторая или синхронно выполнились,а затем вторая ждёт пока выполнится первая.

class UserPage extends Component {
  @computed
  get user() {
    const { match } = this.props;
    const userId = parseInt(match.params.id);
    return store.getUserById(userId);
  }

  @computed
  get stats() {
    this.user.getUserStats();
  }

  @observable isLoading;

  async loadUsersIfNeeded() {
    if (this.user === undefined) {
      try {
        this.isLoading = true;
        await store.loadUsers();//вот первая
      } finally {
        this.isLoading = false;
      }
    }
  }

  async loadUserStats() {
    const { match } = this.props;
    const userId = parseInt(match.params.id);
    await this.user.loadStats(userId);//вот вторая(здесь this.user = undefined)
  }

  componentWillMount() {
    this.loadUsersIfNeeded();
    //здесь пробовал вставлять вторую,но this.user был undefined т.к. не выполнялась ф-ция выше.
  }

  render() {
    if (this.isLoading) {
      return <CircularProgress />;
    }
return (
      <div className={styles.container}>
        <div className={styles.sidebar} key={this.user.id}>
          <UserAvatar user={this.user} size={200} />
          <div className={styles.usertitleName}>{this.user.name}</div>
        </div>
        <Table style={{ width: "50%", margin: "25px 0 0 350px" }}>
          <TableBody>
            <TableRow>
              <TableCell style={{ border: "none" }}>Rating</TableCell>
              <TableCell style={{ border: "none" }}>
                {this.stats.rating}
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell style={{ border: "none" }}>Games</TableCell>
              <TableCell style={{ border: "none" }}>
                {'this.stats.games'}
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell style={{ border: "none" }}>Wins</TableCell>
              <TableCell style={{ border: "none" }}>
                {'this.stats.wins'}
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell style={{ border: "none" }}>Defeats</TableCell>
              <TableCell style={{ border: "none" }}>
                {'this.stats.defeats'}
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    );
  }
}

export default observer(UserPage);

Answer 1

[Афанасий Захаров]

пишете метод loadAll

async loadAll(){
    this.isLoading = true;
    await store.loadUsers();//вот первая
    const { match } = this.props;
    const userId = parseInt(match.params.id);
    await this.user.loadStats(userId);
}

его вызываете в componentWillMount

Comments

[SecDet]

Хмм спасибо, щас попробую

[Афанасий Захаров]

SecDet, ключевой момент, что, по факту, все асинхронные функции, которые друг друга ждут должны запускаться в одной async функции внешней, которая и будет останавливаться, на время, пока выполняется запрос

[SecDet]

Афанасий Захаров, опять ругается на this.user = undefined. Я обновил код в вопросе,упустил весь JSX где как раз таки и ругается.

[Афанасий Захаров]

SecDet, Найдите место в вашем коде, где в переменную this.user что-то пишется. Я его не нашел

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

Answer 2

[Владимир]

https://developer.mozilla.org/uk/docs/Web/JavaScri...

Comments

[SecDet]

У меня расставлен await

[Владимир]

SecDet, не там расставлены. await First(); Second();