Як зробити дзвінок на відпочинок з коду ReactJS?


126

Я новачок у ReactJS та інтерфейсі користувача, і я хотів дізнатися, як зробити простий RST-дзвінок на основі 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, але ви також можете зробити, наприклад, багаточастинні форми.)


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

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

1
Чи можемо ми змінити оригінальну відповідь, щоб включити імпорт?
Тайлер Л

5
IMO, @amann має кращу відповідь нижче . Ця відповідь означає, що fetchце вбудовано в React, чого немає, і немає посилання на документи, на які посилається. fetchє (на момент написання) експериментальним API на основі обіцянок . Для сумісності з браузером вам знадобиться вакхана поліфіл .
chris

2
Зауважте, що це з документів React Native, а не з React JS, але ви можете використовувати Fetch_API і в React JS. facebook.github.io/react-native/docs/network.html
Pål Brattberg

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 року і пізніше, у вас є більш сучасний варіант, який полягає в тому, щоб включити асинхронізацію / очікування у свій додаток 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

@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', {метод: 'POST', заголовки: {Прийняти: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). тоді (відповідь => {console.log (відповідь)}) .catch (помилка => {console.log (помилка)})


2

Ось список порівняння бібліотек ajax на основі функцій та підтримки. Я вважаю за краще використовувати добірку лише для розвитку клієнта або ізоморфного вибору в розробці як на стороні клієнта, так і на сервері.

Для отримання додаткової інформації про izomorphic-fetch vs fetch


0

Ось модифікована функція util (інша публікація в стеку) для отримання і публікації обох. Створіть файл 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"}' тож як я можу викликати таку послугу.
Дівія

створіть змінну, що викликається даними, '{"Id":"112","User":"xyz"}'та змініть URL на localhost: 8080 / myapi / ui / start, ось про це, як тільки виклик XHR буде успішним, ви приземлитеся в виконаному методі, і ви отримаєте доступ до ваших даних через результат майно.
Саням Агравал
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.