Using a function callback inside another function

Question

I have my react element with a couple of functions inside. I want to use the callback of one function inside another function as a variable. Both functions are using Fetch API.

fetchA = () => {
    var data = new FormData();
    data.append('file', this.state.selectedFile, this.state.selcetedFile.name);
    fetch('/files', {method: 'POST', body: data})
      .then(response => {
        return response.json()})
      .then(function(json) {
        console.log(json));})
      .catch(function(error) {
         console.log(error)
      });
}

and

fetchB = () => {
    fetch('/trust', {method: 'put', body: **HERE**})
      .then(response => {
        console.log('SUCCESS')})
      .catch(function(error) {
         console.log(error)
      });
}

You can see in the body of the second fetch call is where i would like to reference the json that was generated in the response of my first function. Can anybody recommend a simple solution for this?

Do you want to call fetchB right away when fetchA is complete? Have you tried just calling fetchB(json);? — Tholle
– Tholle, Commented Jul 26, 2018 at 17:36
yes, right when fetch is done, i want to run fetchB with the response....i havent tried that yet and that was my first thought....but im new to React and wanted to make sure it was correct before trying — Hysii
– Hysii, Commented Jul 26, 2018 at 17:38

Tholle · Accepted Answer · 2018-07-26 17:41:21Z

2

If you want to run fetchB with the result from fetchA right after fetchA is done, you can just call fetchB with the result of fetchA:

Example

class App extends React.Component {
  fetchA = () => {
    const { selectedFile } = this.state;
    const data = new FormData();

    data.append("file", selectedFile, selectedFile.name);

    fetch("/files", { method: "POST", body: data })
      .then(response => {
        return response.json();
      })
      .then(result => {
        this.fetchB(result);
      })
      .catch(error => {
        console.log(error);
      });
  };

  fetchB = data => {
    fetch("/trust", { method: "put", body: data })
      .then(response => {
        console.log("SUCCESS");
      })
      .catch(error => {
        console.log(error);
      });
  };

  // ...
}

answered Jul 26, 2018 at 17:41

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dance2die · Accepted Answer · 2018-07-26 17:46:47Z

0

You can use async/await to make it look like a synchronous operation.

fetchA = async () => {
    var data = new FormData();
    data.append('file', this.state.selectedFile, this.state.selcetedFile.name);
    const response = await fetch('/files', {method: 'POST', body: data});
    return await response.json();
}

fetchB = async () => {
    const body = await fetchA();
    fetch('/trust', {method: 'put', body})
      .then(response => {
        console.log('SUCCESS')})
      .catch(function(error) {
         console.log(error)
      });
}

answered Jul 26, 2018 at 17:46

dance2die

37.2k39 gold badges137 silver badges199 bronze badges

Collectives™ on Stack Overflow

Using a function callback inside another function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related