如何在React中使用异步等待

Question

I'm trying to make my code simple and I would like to use async and await for the code below. however, I don't know how to imply...It'd be nice to have some example codes.

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 {
       ...
    }
}

Answer 1

This is what you want to do (you don't need to save undefined values returned from the 2 first requests, and your code with promises isn't executed sequentially, the second promise isn't returned, so it isn't in a chain):

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 {
       ...
    }
}

Of you can write even such way at the end of the code:

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

Answer 2

You are pretty much there.

Only 2 suggestions

1. Since you are not using the response of delete calls you can get rid of them

2. Once you have the updated posts set state like this

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

Full code

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 {
       ...
    }
}

Answer 3

you can see a lot of examples here , but to implement async/await in your function try using this code:

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);
    }
  }