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

Question

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

1

Я пытаюсь поместить три параметра в моем запросе к почте для конкретного 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 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>
    )
  }
}

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

Piyush Soni 03 фев. 2019, в 10:27

Источник

Теги:

javascript

react-native

json

http-headers

api

fetch-api

2 ответа

Ещё вопросы

vmf91 · Answer 1 · 2019-02-03T07-44-00.000Z

После вашего токена пропал знак.

'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 exactly look in my postman
            'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'
        },
        body: data
    })
    .then((response) => response.json())
    .then((responseJson) => {
        alert(responseJson.detail)
    }).catch((error) => {
        alert('error')
    })
}

Я исправил ошибку. Оператор внутри catch () выполняется. Есть идеи, что может быть не так?
Я исправил еще одну проблему в вашем коде. Что касается токена авторизации, вы должны увидеть документацию API, чтобы увидеть, как он должен быть предоставлен. Что такое API?
Большое спасибо, этот человек работал! пожалуйста, также поддержите меня. Спасибо

Binod Shrestha · Answer 2 · 2019-02-03T07-19-00.000Z

я думаю, что вы можете использовать "x-access-token" в качестве имени заголовка для аутентификационного токена и поместить "Conteent-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.log(responseJson.detail)
        }).catch((error) => {
            alert('error')})
            }

Я отправляю formData и получаю JSON в качестве ответа. Нужно ли вносить какие-либо изменения в этот код?
Теперь ваш метод fetchData работает нормально, и то, что вам нужно делать дальше, зависит от требований вашего приложения. Вы можете обработать данные ответа, чтобы показать пользователю сообщение об успехе / не удалось опубликовать данные.