Как сделать пост-вызов отдыха из кода ReactJS?


126

Я новичок в ReactJS и пользовательском интерфейсе, и я хотел знать, как сделать простой вызов POST на основе REST из кода ReactJS.

Если есть какой-либо пример, это было бы действительно полезно.


6
Не могли бы вы выбрать ответ, который вам помог?
Сократ

Ответы:


215

Прямо из документации React :

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

(Это публикация JSON, но вы также можете использовать, например, multipart-form.)


4
Вы должны установить его и импортировать . Не забывайте, fetch()функция не возвращает данные , она просто возвращает обещание .
Malvolio

1
ха-ха @ Дивья, я как раз собирался сделать тот же комментарий перед тем, как прочитать ваш. Не уверен, стоит ли помещать его в React.createClass. Кроме того, не могли бы мы дать ссылку на соответствующие документы? Я безуспешно пытался выполнить поиск на их сайте ( facebook.github.io/react/docs/hello-world.html ).
Tyler L

1
Можем ли мы изменить исходный ответ, чтобы включить импорт?
Tyler L

5
ИМО, у @amann есть лучший ответ ниже . Этот ответ подразумевает fetch, что он встроен в React, а это не так, и нет ссылки на упомянутые документы. fetchявляется (на момент написания) экспериментальным API на основе Promise . Для совместимости с браузером вам понадобится полифилл babel .
Крис

2
Обратите внимание, что это из документов React Native, а не из документов React JS, но вы также можете использовать Fetch_API в React JS. facebook.github.io/react-native/docs/network.html
Пол

23

React на самом деле не имеет мнения о том, как вы совершаете вызовы REST. По сути, для этой задачи вы можете выбрать любую библиотеку AJAX, которая вам нравится.

Самый простой способ с простым старым JavaScript, вероятно, выглядит примерно так:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);

В современных браузерах вы также можете использовать fetch.

Если у вас есть больше компонентов, которые выполняют вызовы REST, возможно, имеет смысл поместить такую ​​логику в класс, который можно использовать во всех компонентах. НапримерRESTClient.post(…)


5
Для меня это самый лучший ответ, потому что React не имеет ничего встроенный. Вы должны либо импорта fetchили superagentили jQueryили axiosили что - то другое , что не является частью «ваниль React» для того , чтобы сделать что - нибудь другое , чем то , что размещен выше ,
vapcguy

Похоже, что если вы используете колбу, это хорошо работает, JSON.stringify({"key": "val"})а затем на стороне колбыrequest.get_json()
Pro Q

Да, если вы публикуете JSON, вам нужно JSON.stringifyсначала это сделать.
amann

19

Еще один популярный в последнее время пакет: axios

Установить: npm install axios --save

Запросы на основе простых обещаний


axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

9

вы можете установить суперагент

npm install superagent --save

затем для отправки почтового звонка на сервер

import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
});  

5

Начиная с 2018 года и позже у вас есть более современный вариант - включить async / await в ваше приложение ReactJS. Можно использовать основанную на обещаниях клиентскую библиотеку HTTP, такую ​​как axios. Пример кода приведен ниже:

import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
           const response = await axios.post('/login', { email, password });
           console.log(response);
        } catch (err) {
           ...
        }
    }
    ...
}

по какой-то причине nodejs интерпретирует await-SyntaxError: await is a reserved word (33:19)
прайагупд

@prayagupd какую версию узла вы используете?
Кевин Ле - Кнле

5

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

    submitHandler = e => {
    e.preventDefault()
    console.log(this.state)
    fetch('http://localhost:5000/questions',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
                    'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.state)
    }).then(response => {
            console.log(response)
        })
        .catch(error =>{
            console.log(error)
        })
    
}

https://googlechrome.github.io/samples/fetch-api/fetch-post.html

fetch ('url / questions', {method: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (response)}) .catch (error => {console.log (error)})


2

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

Для получения дополнительной информации об изоморфной выборке и выборке


0

Вот модифицированная служебная функция (еще один пост в стеке) для получения и публикации обоих. Создайте файл Util.js.

let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

Использование, как показано ниже, в другом компоненте

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }

-4

Вот пример: https://jsfiddle.net/69z2wepo/9888/

$.ajax({
    type: 'POST',
    url: '/some/url',
    data: data
  })
  .done(function(result) {
    this.clearForm();
    this.setState({result:result});   
  }.bind(this)
  .fail(function(jqXhr) {
    console.log('failed to register');
  });

Он использовал jquery.ajaxметод, но вы можете легко заменить его библиотеками на основе AJAX, такими как axios, superagent или fetch.


Большое спасибо за пример :). Я также хотел понять, ожидает ли моя служба данных в формате JSON. Какие изменения потребуются? Любая информация была бы действительно полезной. Поэтому, когда я использую команду curl для попадания в конечную точку, это похоже на curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' так как я могу позвонить в такую ​​службу.
Divya

создайте переменную с именем data '{"Id":"112","User":"xyz"}'и измените URL-адрес на localhost: 8080 / myapi / ui / start, вот и все, как только вызов XHR будет успешным, вы попадете в метод done, и у вас будет доступ к вашим данным через результат свойство.
Sanyam Agrawal
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.