Pass Fetch Request to another Fetch Request in React Native

Question

I'm fairly new to react native so be gentle please. I have a double fetch request inside componentDidMount which works as expected:

  componentDidMount() {

    const auth = new Buffer('username:HASHGOESHERE');
    const token = auth.toString('base64');
    const authHeader = 'Basic ' + token;


fetch('https://example.com/api-connect/get-token.php', {
  method: 'POST',
  headers: {
    'Authorization': authHeader,
    'Content-Type': 'application/json'
  },
}).then((response) => response.json())
.then((responseText) => {

  if (responseText.status.status === 'success'){

    fetch('https://example.com/api-connect/send-request.php?action=get_faq', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + responseText.payload.access_token,
        'Content-Type': 'application/json',
      },
    })
    .then((response) => response.json())
    .then((responseData) => {

      this.setState({
        isLoading: false,
        faqs: responseData.payload.faqs,
      });

    })

  }else{
    alert('Something has gone wrong.');
  }

})

}

I have to use the get token fetch request everytime i need to make a fetch request throughout my app. I was wondering if there is a way to set up the get token fetch request (maybe in a different file) so i can call/import it when i need, then pass a second fetch to it somehow rather than having to write all my fetch requests as above.

Hopefully what i'm asking makes sense - i can provide more code if needed.

Thanks in advance

Tobias Schäfer · Accepted Answer · 2020-01-12 18:03:33Z

1

Try is with await:

React Component

async componentDidMount() {
    const auth = new Buffer('username:HASHGOESHERE');
    const token = auth.toString('base64');
    const authHeader = 'Basic ' + token;

    const tokenRequest = await getToken();

    if (tokenRequest.status.status === 'success'){
        const response2 = await fetch('https://example.com/api-connect/send-request.php?action=get_faq', {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + tokenRequest.payload.access_token,
            'Content-Type': 'application/json',
          },
        })
        const responseData = await response2.json();
        this.setState({
            isLoading: false,
            faqs: responseData.payload.faqs,
        });

    }else{
        alert('Something has gone wrong.');
    }
}

Somefile.js

export const getToken = async () => {
    const response = await fetch('https://example.com/api-connect/get-token.php', {
        method: 'POST',
        headers: {
            'Authorization': authHeader,
            'Content-Type': 'application/json'
        },
    })
    const responseText = await response.json();
    return responseText
}

Don't forget to import 'Somefile.js' to the react component.

edited Jan 12, 2020 at 18:03

answered Jan 12, 2020 at 17:24

Tobias Schäfer

1,3683 gold badges17 silver badges39 bronze badges

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

3 Comments

S.B Over a year ago

My current request works - What i'm looking for is a way to have the get token fetch request set up in a different file so i can import it and then pass a second fetch to it.

S.B Over a year ago

Tried this just now, got it to work. Thanks for your help :)

Tobias Schäfer Over a year ago

Could you please accept my answer if it helped you?

Collectives™ on Stack Overflow

Pass Fetch Request to another Fetch Request in React Native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related