React Native - установить порядок для двух функций

Question

Я новичок в React Native, поэтому заранее извиняюсь.
У меня есть функция setAllComments (), которая вызывается из componentDidMount.
Эта функция выполняет AsyncStorage.setItem (), и я хочу, чтобы эта функция была завершена до вызова другой функции - getComments (),
(что делает AsyncStorage.getItem ()).

Проблема в том, что функция getComments () выполняется до завершения функции setAllComments ().
Я пытался решить ее с помощью функции обратного вызова, но это застряло в моем приложении.

Кто-нибудь знает, как установить порядок для этих двух функций?

 async componentDidMount() {

        this.setAllComments();

      }

   
  setAllComments = () => {
    console.log("setAllComments function!");
    fetch(URL + "/CommentsList2", {
      body: null,
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json; charset=UTF-8"
      }
    })
      .then(res => {
        return res.json();
      })
      .then(commentsResult => {
        console.log("function setAllComments - before comments parse");
        AsyncStorage.setItem("@Project:comments", commentsResult.d);
        console.log("finished setItem");
      })
      .catch(err => {
        console.error(err);
      })
      .then(this.getComments());
  };

  async getComments() {
    console.log("entered getCommens");
    await AsyncStorage.getItem("@Project:comments").then(value => {
      let commentsList = JSON.parse(value);
      this.setState({ comments: commentsList });
      console.log(this.state.comments, "getComments - Player with comments");
    });
  }

Answer 1

Будучи новичком, вы отлично справляетесь с использованием asyn, но асинхронность не должна работать.У async есть отличная функция или «слово» для работы, она называется «ожидание», именно то, что вы хотите.Он ожидает асинхронную функцию и нет необходимости использовать ".then ()"

Ваша функция с асинхронностью должна быть похожа на

 async componentDidMount() {

        await this.setAllComments();
        await this.getComments()
      }


  setAllComments = async () => {
    //console.log("setAllComments function!");
    var fetchresult = await fetch(URL + "/CommentsList2", {
      body: null,
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json; charset=UTF-8"
      }
    })
    fetchresult = await fetchresult.json()
    //console.log("function setAllComments - before comments parse");
    await AsyncStorage.setItem("@Project:comments", fetchresult.d).catch(err => {
        console.error(err);
      })
    //console.log("finished setItem")
  };

  async getComments() {
    //console.log("entered getCommens");
    let commentsList = await AsyncStorage.getItem("@Project:comments")
       commentsList = JSON.parse(Comments)
      this.setState({ comments: commentsList });
      //console.log(this.state.comments, "getComments - Player with comments");
    });
  }

Answer 2

У вас есть несколько проблем с вашим подходом.

Первый.AsyncStorage хорошо асинхронно

AsyncStorage.setItem("@Project:comments", commentsResult.d);
console.log("finished setItem"); // not true

Вам нужно вернуть обещание, чтобы сохранить цепочку обещаний

  .then(commentsResult => {
    console.log("function setAllComments - before comments parse");
    return AsyncStorage.setItem("@Project:comments", commentsResult.d);
  }) 
  .then(() => console.log("finished setItem");) // now it is more likely :)

Тогда .then(this.getComments()); вы немедленно вызываете функцию, должно быть

.then(() => this.getComments());

И, наконец, setState также является асинхронным (но он не возвращает обещание).Поэтому вам нужно будет передать обратный вызов.

this.setState(
  { comments: commentsList },
  () => console.log(this.state.comments, "getComments - Player with comments")
);

Также вы смешиваете async/await с кучей then/catch придерживайтесь одного подхода через ваш код (по крайней мере, внутри функции :))