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

Question

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

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

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

Благодарю.

150

reactjs react-jsx reactjs-flux reactjs-native

Источник

user6427117 21 июл '16 в 17:24

12 ответов

Другие вопросы по тегам reactjs react-jsx reactjs-flux reactjs-native

user238884 21 июл '16 в 17:47 2016-07-21 17:47 · Answer 1 · 2016-07-21 17:47

Прямо из документов 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.)

249

Источник

user238884 21 июл '16 в 17:47

user343045 21 июл '16 в 18:53 2016-07-21 18:53 · Answer 2 · 2016-07-21 18:53

У 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(…)

user2349407 15 ноя '17 в 09:43 2017-11-15 09:43 · Answer 3 · 2017-11-15 09:43

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

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

Простые запросы на основе Promise

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

23

Источник

user2349407 15 ноя '17 в 09:43

user7430694 18 июл '17 в 09:24 2017-07-18 09:24 · Answer 4 · 2017-07-18 09:24

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

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

9

Источник

user7430694 18 июл '17 в 09:24

user1244013 31 дек '17 в 07:19 2017-12-31 07:19 · Answer 5 · 2017-12-31 07:19

Начиная с 2018 года, у вас есть более современный вариант, который заключается в включении async/await в ваше приложение ReactJS. A promise-based HTTP client library such as axios can be used. The sample code is given below:

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

user11032532 11 май '19 в 05:05 2019-05-11 05:05 · Answer 6 · 2019-05-11 05:05

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

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

user3603575 29 июл '16 в 09:14 2016-07-29 09:14 · Answer 7 · 2016-07-29 09:14

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

Для получения дополнительной информации об isomorphic-fetch vs fetch

user13081559 17 апр '21 в 08:52 2021-04-17 08:52 · Answer 8 · 2021-04-17 08:52

Вот простой метод определения и вызова API сообщений в reactjs. Установить axios используя команду npm install axios и позвони post req где бы вы ни были, он вернет массив, содержащий 100 элементов.

      // Define post_req() Method in authAction.js

import axios from 'axios';

const post_req = (data) => {
return new Promise((resolve, reject) => {
const url = 'https://jsonplaceholder.typicode.com/posts'
const header = {
    "Access-Control-Allow-Origin": "*",
    "Content-Type: application/json"
}
axios({
    method: 'post',
    url: url,
    data: data,
    headers: header
 });
 .then((res)=>{resolve(res);})
 .catch((err)=>{reject(err);})
 })
}

// Calling post_req() Method in react component 
import React, { Component } from 'react';
import { post_req } from 'path of file authAction.js'

class MyReactComponent extends Component {
constructor(props) {
super(props);
this.state = {
 myList:[]
 };
}
componentDidMount() {
let data = {
 .......
 } 
 this.props.post_req(data)
 .then((resp)=>{this.setState({myList:resp.data})})
 .catch((err)=>{console.log('here is my err',err)})
}
render() {
return (
  <div>
    ....
  </div)
 }
}
export default MyReactComponent;

user7846238 11 авг '22 в 12:42 2022-08-11 12:42 · Answer 9 · 2022-08-11 12:42

Вот краткий пример для v18+ при обработке данных формы и создании запроса POST с данными.

      async function handleOrderSubmit(event){
  event.preventDefault()

  try{
    const formData= {name: event.target.name.value, email: event.target.email.value, message: event.target.name.message}
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
    };
    const response = await fetch('https://www.example.com/form', requestOptions);
    const data = await response.json();
    navigate("/form-response", { state: {data: data, status: true} })
  }
  catch(error){
    navigate("/form-response", { state: {status: false} })
  }
}

Примечание 1: Использованиеstatusна странице «/form-response» вы можете настроить, что показывать пользователю. Для true вы можете показать другой раздел, а для false другой.

Примечание 2: Если статус успешен, вы также можете получить доступ к данным на следующей странице и настроить их в соответствии с информацией о пользователе.

Заметка 3: event.preventDefault()важно, чтобы избежать перезагрузки страницы.

user14237085 17 окт '21 в 14:12 2021-10-17 14:12 · Answer 10 · 2021-10-17 14:12

импортировать React,{useState} из 'react'; импортировать Axios из 'axios';

экспортировать функцию по умолчанию Formlp () {

      const url ="";

const [state, setstate] = useState({
    name:"",
    iduser:""
})

function handel(e){

    const newdata={...state}
    newdata[e.target.id]=e.target.value
    setstate(newdata);
}

function submit(e)
{
    e.preventDefault();

  //  Axios.post(url,{name:state.name,iduser:state.iduser}).then( res=>{console.log(res)});

  console.log(state)

}

return (<div onSubmit = {(e) => submit (e)}> <input onChange = {(e) => handel (e)} id = "name" value = {state.name} placeholder = "name" type = "text"> <input onChange = {(e) => handel (e)} id = "iduser" value = {state.iduser} placeholder = "iduser" type = "text">

              <button>submit</button>
        </form>
    </div>

); }

user7868753 07 ноя '19 в 22:55 2019-11-07 22:55 · Answer 11 · 2019-11-07 22:55

Вот модифицированная служебная функция (еще один пост в стеке) для получения и публикации обоих. Создайте файл 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);   
    });
  }

user1545092 21 июл '16 в 17:38 2016-07-21 17:38 · Answer 12 · 2016-07-21 17:38

Вот пример: 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.