Статьи

Сделайте HTTP-запросы в iOS с React Native

Июль 8, 2017

Если вы следите за моим блогом, вы узнаете, что я написал статью для выполнения  HTTP-запросов с Ionic Framework . Так как в последнее время я много играл с  React Native  , я подумал, что, вероятно, будет хорошей идеей выяснить, как выполнять запросы RESTful HTTP раньше, чем позже, так как теперь у всех есть API-интерфейс.

В документации Facebook для React Native есть (или было на момент написания этой статьи) руководство по  получению данных фильмов из удаленного API . Однако вряд ли объяснили, как настроить HTTP-запрос. Фактически, я обнаружил, что во многих интернетах отсутствует четкая документация для запросов RESTful с React.

Эта статья должна прояснить ситуацию!

В дальнейшем я собираюсь предположить, что у вас настроено веб-приложение, которое вы можете использовать в качестве конечных точек API. Неважно, как вы его настроили, пока есть конечная точка GET и конечная точка POST. Мои конечные точки будут возвращать следующие данные:

GET / тест

{
    status: "success",
    message: "a sample GET request",
    search: {{QUERY.search}}
}

В приведенном выше ответе  QUERY.search это параметр, который будет передан в запрос. Ответ просто возвращает переданный параметр запроса.

POST / тест

{
    status: "success",
    message: "a sample POST request",
    body: {
        username: {{BODY.username}}
        firstname: {{BODY.firstname}}
        lastname: {{BODY.lastname}}
    }
}

В ответе выше  BODY.username это свойство в теле JSON, которое было передано в запросе. Аналогично с  BODY.firstname и  BODY.lastname свойствами.

Хорошо, теперь, когда API не работает, давайте посмотрим, как поразить эти конечные точки с помощью React Native.

Мы собираемся использовать  fetch функцию. Это может быть лучше понято следующим образом:

fetch("API_ENDPOINT_HERE", {
    method: "",
    headers: {},
    body: ""
})
.then((response) => response.json())
.then((responseData) => {})
.done();

Обратите внимание, что эта  body опция не будет существовать для   запросов GET .

Итак, давайте попробуем это с нашими конечными точками API:

fetch("http://www.example.com/test", {method: "POST", body: JSON.stringify({username: "nraboy", firstname: "Nic", lastname: "Raboy"})})
.then((response) => response.json())
.then((responseData) => {
    AlertIOS.alert(
        "POST Response",
        "Response Body -> " + JSON.stringify(responseData.body)
    )
})
.done();

Приведенный выше код попадет в нашу   конечную точку POST . Это пройдет  username,  firstnameи  lastname в теле запроса. Когда ответ получен, он покажет предупреждение, которое выплевывает возвращенный контент, который является только тремя свойствами, возвращенными нам.

Это оставляет нас с   конечной точкой GET, которую можно увидеть ниже:

fetch("http://www.example.com/test?search=nraboy", {method: "GET"})
.then((response) => response.json())
.then((responseData) => {
    AlertIOS.alert(
        "GET Response",
        "Search Query -> " + responseData.search
    )
})
.done();

В приведенном выше коде есть  search параметр запроса. Конечная точка просто вернет нам это значение, и мы отобразим его как предупреждение. Ничего особенного в этом примере.

Если вы хотите увидеть этот проект в действии, сделайте следующее, если у вас установлен React Native и вы используете Mac. Используя свой Терминал, выполните:

react-native init ReactProject

В своем недавно созданном проекте откройте   файл index.ios.js и замените весь код следующим:

'use strict';

var React = require('react-native');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    AlertIOS,
} = React;

var ReactProject = React.createClass({

    _onPressButtonGET: function() {
        fetch("http://localhost:3000/test?search=nraboy", {method: "GET"})
        .then((response) => response.json())
        .then((responseData) => {
            AlertIOS.alert(
                "GET Response",
                "Search Query -> " + responseData.search
            )
        })
        .done();
    },

    _onPressButtonPOST: function() {
        fetch("http://localhost:3000/test", {method: "POST", body: JSON.stringify({username: "nraboy", firstname: "Nic", lastname: "Raboy"})})
        .then((response) => response.json())
        .then((responseData) => {
            AlertIOS.alert(
                "POST Response",
                "Response Body -> " + JSON.stringify(responseData.body)
            )
        })
        .done();
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TouchableHighlight onPress={this._onPressButtonGET} style={styles.button}>
                    <Text>GET</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._onPressButtonPOST} style={styles.button}>
                    <Text>POST</Text>
                </TouchableHighlight>
            </View>
        );
    },

});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        backgroundColor: '#eeeeee',
        padding: 10,
        marginRight: 5,
        marginLeft: 5,
    }
});

AppRegistry.registerComponent('ReactProject', () => ReactProject);

Пример React Native Fetch Пример React Native Fetch GET Пример React Native Fetch POST

Не так уж плохо, верно?

Вывод

Несмотря на то, что это непросто понять из-за минимального количества документации, которая появляется в сети, совершать  fetchвызовы на конечных точках RESTful HTTP не сложно в React Native.

Видео-версию этой статьи можно увидеть ниже.

35
Share: