0

I'm building an App using reactjs and I'm questioning axios.

I have an axios.post

and following that I call a function

this.props.onChangeStep1()

with the way it is written...am I safe ? Will this.props.onChangeStep1() always wait for res.data to be full ?

 onChangeHandler = event => {
    console.log(event.target.files[0]);

    this.setState(
      {
        selectedFile: event.target.files[0],
        fileName: event.target.files[0].name,
        loaded: 0
      },
      () => {
        console.log(this.state.selectedFile);
        console.log(this.state.loaded);
        const formData = new FormData();
        formData.append("file", this.state.selectedFile);

        axios
          .post(`/upload`, formData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            console.log(res);
            console.log(res.data);
          });

        this.props.onChangeStep1(); //<---- Will this wait for res.data ?
      }
    );
Community
  • 1
  • 1
azuldev
  • 570
  • 6
  • 10
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Emile Bergeron Aug 22 '19 at 03:08

2 Answers2

2

No. It won't wait. You should put it into .then:

 onChangeHandler = event => {
    console.log(event.target.files[0]);

    this.setState(
      {
        selectedFile: event.target.files[0],
        fileName: event.target.files[0].name,
        loaded: 0
      },
      () => {
        console.log(this.state.selectedFile);
        console.log(this.state.loaded);
        const formData = new FormData();
        formData.append("file", this.state.selectedFile);

        axios
          .post(`/upload`, formData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            console.log(res);
            console.log(res.data);
            this.props.onChangeStep1();
          });
      }
Maxim Pyshko
  • 551
  • 4
  • 14
0

In your example onChangeStep will be executed before the result from axios.

You can call this.props.onChangeStep1() inside .then() block: 


        axios
          .post(`/upload`, formData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }) 
          .then(res => {
             console.log(res);
             console.log(res.data);
             this.props.onChangeStep1();
           });

Or you can use async/await

 postData = async () => {
        const formData = new FormData();
        formData.append("file", this.state.selectedFile);
        try {
          const result = await axios.post(`/upload`, formData, /* all your headers..*/)
          this.props.onChangeStep1(); // this line will be executed after post request 
        } catch(error){
          // do something with error. 
        }         
      }
 }
 onChangeHandler = event => {
    this.setState(
      {
        selectedFile: event.target.files[0],
        fileName: event.target.files[0].name,
        loaded: 0
      }, 
    this.postData)
 }
Milton
  • 71
  • 4