Как получить API (POST) с заголовком в собственном приложении React

Я пытаюсь поместить три параметра в свой почтовый запрос к определенному API, но я не получил ответа, как ожидал. API отлично работает в моем почтальоне, но я не уверен в своем методе извлечения в моем родном приложении для реагирования. Я новичок в этом, поэтому я не знаю, как помещать заголовки в мой запрос API. Я следил за некоторыми документами, но не получил много, пожалуйста посмотрите и ответьте на мой вопрос.

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

Вот результат, который я сейчас вижу в своем окне предупреждения: «Учетные данные аутентификации не были предоставлены».

json api react-native http-headers fetch-api

03.02.2019 10:00

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

4 683

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

После вашего токена отсутствует '.

'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb;

И поскольку это объект JSON, вы должны удалить точку с запятой

Таким образом, окончательный код будет

'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'

Есть и другая проблема. Объявление данных недоступно из функции выборки. Так что вы должны сделать что-то вроде этого.

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

Я исправил ошибку. Оператор внутри catch() выполняется. Есть идеи, что может быть не так?

— 03.02.2019 10:10

Я исправил еще одну проблему в вашем коде. Что касается токена аутентификации, вы должны просмотреть документацию API, чтобы узнать, как он должен быть предоставлен. Что такое API?

— 03.02.2019 10:16

Большое спасибо этому трудяге! пожалуйста, также проголосуйте за меня. Спасибо

— 03.02.2019 10:53

03.02.2019 10:04

я думаю, вы можете использовать «x-access-token» в качестве имени заголовка для токена аутентификации и разместить Content-Type.

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.info(responseJson.detail)
        }).catch((error) => {
            alert('error')})
            }

Я отправляю formData и получаю ответ JSON. Нужно ли вносить какие-либо изменения в этот код?

— 03.02.2019 10:15

теперь ваш метод fetchData работает нормально, что вам нужно делать дальше, зависит от требований вашего приложения. вы можете обрабатывать данные ответа, чтобы показать пользователю сообщение об успешном/неудачном размещении данных.

— 03.02.2019 10:22

03.02.2019 10:11