how to fetch api(POST) with header in react native app

Question

I am trying to put three params in my post request to particular api but i didn't get the response as i expected. API works fine in my Postman but i am not sure about my fetching method in my react native app i am new to this so i don't know how to put headers in my api request i followed some docs but didn't get much please have a look and answer my question.

 constructor (props) {
        super (props)
        this.state = {
            detail: ''
        }
    }

    ComponentDidMount(){
        var data = new FormData();
        data.append('mobile_number','8615351655')
        data.append('mobile_country_code','+21')
        data.append('rec_name','Shantanu Talwaar')
    }
    fetchData = async() => {
        fetch('http://link.com/link/',
        {
            method: 'POST', 
            headers:{
                 //this what's exactly look in my postman
                'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb;
            },
            body: this.data
        })
        .then((response) => response.json())
        .then((responseJson) => {
                alert(responseJson.detail)
        }).catch((error) => {
            alert('error')})}

  render() {
    return (
      <View style = {styles.container}>
        <Button onPress = {this.fetchData} title = "fetch"/>
        <Text style={styles.text}>Fetched data displays below</Text>
        <Text style={styles.text}>{this.state.detail}</Text>
      </View>
    )
  }
}

This is the result i am having right now in my alert box: "Authentication credentials were not provided."

vmf91 · Accepted Answer · 2019-02-03 09:15:27Z

4

There is a ' missing after your token.

'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb;

And as it is a JSON Object you should remove the semi-colon

So, the final code will be

'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'

There is also another problem. The data declaration is not accessible from the fetch function. So you should do something like this.

fetchData = async() => {
    var data = new FormData();
    data.append('mobile_number','8615351655')
    data.append('mobile_country_code','+21')
    data.append('rec_name','Shantanu Talwaar')

    fetch('http://link.com/link/',
    {
        method: 'POST', 
        headers:{
            //this what's exactly look in my postman
            'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'
        },
        body: data
    })
    .then((response) => response.json())
    .then((responseJson) => {
        alert(responseJson.detail)
    }).catch((error) => {
        alert('error')
    })
}

edited Feb 3, 2019 at 9:15

answered Feb 3, 2019 at 9:04

vmf91

1,94722 silver badges28 bronze badges

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

3 Comments

Piyush Soni Over a year ago

I have fixed the mistake. The statement inside catch() is getting executed. Any idea what could be wrong ?

vmf91 Over a year ago

I have fixed another problem in your code. About the auth token, you must see the API docs to see how it must be provided. What is the API?

Piyush Soni Over a year ago

Thanks a lot this worked man! please also upvote me. Thank you

iambinodstha · Accepted Answer · 2019-03-26 10:09:49Z

3

i think you can use "x-access-token" as header name for authentication token and place Content-Type too.

fetchData = () => {
        fetch('http://link.com/link/',
        {
            method: 'POST', 
            headers:{
                'Content-Type': "application/json",
                'x-access-token': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'
            },
            body: this.data
        })
        .then((response) => response.json())
        .then((responseJson) => {
                console.log(responseJson.detail)
        }).catch((error) => {
            alert('error')})
            }

edited Mar 26, 2019 at 10:09

answered Feb 3, 2019 at 9:11

iambinodstha

1,00711 silver badges12 bronze badges

2 Comments

Piyush Soni Over a year ago

I am sending formData , and receiving JSON as response. Do i need to make any changes to this code ?

iambinodstha Over a year ago

now your fetchData method work fine what you need to do next depends upon you application requirement. you can handle response data to show message to user about success/failed to post data.

Collectives™ on Stack Overflow

how to fetch api(POST) with header in react native app

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related