如何在React中使用async，等待-Java 学习之路

我正在尝试使我的代码变得简单，我想使用async并等待下面的代码 . 但是，我不知道如何暗示......有一些示例代码会很好 .

deletePost = (post) => {
    var post_id = post;

    try {
        axios.delete(`http://localhost:4000/deleteAll/comments/${post_id}`)
            .then(() => {
                axios.delete(`http://localhost:4000/posts/${post_id}`);
            }).then(() => {
                axios.get('http://localhost:4000/posts')
               .then(({data}) => {
                    this.setState({
                        posts: data.result
                    })
                })
            })
    }
    catch(err) {
        console.error(err);
    }
}

// This is what i understand so far.
deletePost = async(post) => {
    var post_id = post;
    try {
        var deleteComments = await axios.delete(`http://localhost:4000/deleteAll/comments/${post_id}`);
        var deletePost = await axios.delete(`http://localhost:4000/posts/${post_id}`);
        var getPost = await axios.get('http://localhost:4000/posts'); // How can I change the state here??          
        // return ??
    }
    catch {
       ...
    }
}

3 回答

你几乎就在那里 .

只有2条建议

由于您没有使用删除调用的响应，您可以删除它们
一旦你有更新的帖子设置状态像这样

const response = await axios.get('http://localhost:4000/posts');         
this.setState({
     posts: response.result
});

完整代码

deletePost = async(post) => {
    var post_id = post;
    try {
        await axios.delete(`http://localhost:4000/deleteAll/comments/${post_id}`);
        await axios.delete(`http://localhost:4000/posts/${post_id}`);
        let response = await axios.get('http://localhost:4000/posts');         
        this.setState({
             posts: response.result
        });
    }
    catch {
       ...
    }
}

回复于 2024-05-03T04:10:45+08:00

这是你想要做的（你不需要保存从2个第一个请求返回的 undefined 值，并且你的代码返回了承诺isn 't executed sequentially, the second promise isn' t，因此它不在链中）：

deletePost = async(post) => {
    let post_id = post;
    try {
        await axios.delete(`http://localhost:4000/deleteAll/comments/${post_id}`);
        await axios.delete(`http://localhost:4000/posts/${post_id}`);
        const {data} = await axios.get('http://localhost:4000/posts');
        this.setState({
             posts: data.result
        }) 
    }
    catch {
       ...
    }
}

你甚至可以在代码的末尾写这样的方式：

this.setState({
   posts: (await axios.get('http://localhost:4000/posts')).data.result
})

回复于 2024-05-03T04:10:45+08:00

你可以看到很多例子here，但是要在你的函数中实现async / await，请尝试使用以下代码：

async deletePost(post) {
    try {
      const post_id = post;
      if (post_id) {
        // We do not assign the response to a variable because we do not need it for now.
        await axios.delete(`http://localhost:4000/deleteAll/comments/${post_id}`);
        await axios.delete(`http://localhost:4000/posts/${post_id}`);
        // Assign the response to a variable to get the 'posts' data.
        const response = await axios.get('http://localhost:4000/posts');
        const { result } = response;
        if (result) {
          this.setState({
            posts: result,
          });
        }
      }
    } catch (error) {
      console.log('deletePost error:' , error);
    }
  }

回复于 2024-05-03T04:10:45+08:00

如何在React中使用async，等待

3 回答

相关问题