ReactJSコードから残りの投稿を呼び出す方法は?


126

私はReactJSとUIが初めてで、ReactJSコードからRESTベースの簡単なPOST呼び出しを行う方法を知りたいと思っていました。

何か例があるなら、それは本当に役に立ちます。


6
あなたを助けた答えを選んでいただけますか?
ソクラテス

回答:


215

React docsから直接

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()関数はデータを返さず、単にpromiseを返します。
Malvolio

1
笑@Divya、私はあなたのコメントを読む前に同じコメントをしようとしていたところです。React.createClassに入れるかどうかわからない。また、反応ドキュメントへのリンクをお願いしますか?私は彼らのサイト(facebook.github.io/react/docs/hello-world.html)を検索しようとして失敗しました。
Tyler L

1
元の回答を変更してインポートを含めることはできますか?
タイラーL

5
IMO、@ amannは以下のより良い答えを持っています。この答えfetchは、Reactに組み込まれていることを意味しますが、そうではなく、参照されているドキュメントへのリンクはありません。fetch(執筆時点では)実験的なPromiseベースのAPIです。ブラウザ互換性のために、バベルポリフィルが必要になります。
クリス

2
これはReact JSドキュメントではなく、React Nativeドキュメントからのものですが、React JSでもFetch_APIを使用できます。facebook.github.io/react-native/docs/network.html
PAL 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には何も組み込まれていないので、私にはこれが最良の答えです。上記の投稿以外のことを行うには、「vanilla React」の一部ではない、or 、fetchor superagentjQueryまたはaxiosその他のものをインポートする必要があります。。
vapcguy

フラスコを使用している場合、それはうまく機能しJSON.stringify({"key": "val"})、次にフラスコ側では機能するようですrequest.get_json()
Pro Q

はい、JSONを投稿する場合は、JSON.stringifyまずそれを行う必要があります。
アマン

19

最近人気のある別のパッケージは、axiosです。

インストール: npm install axios --save

Simple Promiseベースのリクエスト


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

9

あなたはsuperagentをインストールできます

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アプリケーションに非同期/待機を組み込むというより近代的なオプションがあります。axiosなどのpromiseベースの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) {
           ...
        }
    }
    ...
}

何らかの理由でnodejsは解釈しないためにawait-SyntaxError: await is a reserved word (33:19)
prayagupd

@prayagupdどのバージョンのノードを使用していますか?
Kevin Le-Khnle 2018年

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'、 'C​​ontent-Type': 'application / json'、}、body:JSON.stringify(this.state) })。then(response => {console.log(response)}).catch(error => {console.log(error)})



0

getとpostの両方に対して変更された(スタック上の別の投稿)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メソッドを使用しましたが、axios、superagent、fetchなどのAJAXベースのライブラリで簡単に置き換えることができます。


例をたくさんありがとう:)。また、サービスが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
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.