web-dev-qa-db-ja.com

ReactJSコードから休憩の電話をかけるにはどうすればいいですか？

私はreactJSとUIに慣れていないと私はreactJSコードからPOST呼び出しに基づいて簡単な休憩を作る方法を知りたかったです。

例があればそれは本当に役に立つでしょう。

ありがとう。

reactjsreact-jsxreactjs-fluxreactjs-native
88
Divya

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などもできます。）

148
Malvolio

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

18
amann

最近人気があるもう一つのパッケージは： 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
Vivek Doshi

あなたはスーパーエージェントをインストールすることができます

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
Chandrakant Thakkar

2018年以降、あなたはあなたのReactJSアプリケーションにasync/awaitを組み込むというもっと現代的なオプションを持っています。 axiosなどの約束ベースのHTTPクライアントライブラリを使用できます。サンプルコードを以下に示します。

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) {
           ...
        }
    }
    ...
}
4
Kevin Le - Khnle

ここ は、機能とサポートに基づくajaxライブラリー比較のリストです。クライアント側の開発にのみ fetch を使用するか、クライアント側とサーバー側の両方の開発に使用する場合は isomorphic-fetch を使用します。

同型フェッチとフェッチ の比較

2
user3603575

これも普通のやり方だと思います。でも申し訳ありませんが、私は英語では説明できません（（

    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'、ヘッダ：{Accept： 'application/json'、 'C​​ontent-Type'： 'application/json'、}、本文：JSON.stringify（this.state） （response => {console.log（response）}）.catch（error => {console.log（error）}）

0
Mr Fun