【1から始めるReact】概要の紹介と環境構築をやってみよう！
なべっち
FetchAPIを使って簡単にHTMLとNode.jsの非同期通信を実現する方法
もきち
こんにちは。もきちです。
今回は、JavascriptのFetchAPIを使って、サーバー側のNode.jsに非同期でJSONパラメータを送信する方法をご紹介します。
フロント側（パラメータ送信側）
まずはパラメータを送信するフロント側の記述から。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const url = 'http://localhost:3000/api'; // 送信先URL fetch(url, { method: "post", body: JSON.stringify({id: 1, name: 'Yamada'}), headers : new Headers({ "Content-type" : "application/json" }) }).then((response) => { console.log(response); if (!response.ok) { throw Error(response.statusText); } return response; }) .then((response) => response.json()) .then((data) => { console.log(data); // サーバー側から返ってきたデータ }) .catch(e => { console.log(e.message); // Error }); |
フロント側では特に難しいことはありません。
パラメータはbodyにデータを入れるのと、headersの記述を忘れないようにしてくださいね。
サーバー側（パラメータ受信側）
次に、パラメータを受信するサーバー側の設定です。
ここに落とし穴がありました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var express = require('express') var app = express() var server = app.listen(3000, function(){ console.log('server is running on port 3000') }) app.post('/api/', (request, response) => { // 受け取ったデータ console.log(request.body) // 返り値をセット const resultData= { id: request.body.id, name: request.body.name, result: 'OK!!' } response.status(200).send(JSON.stringify(resultData)) }) // request.bodyの中身が無い… |
これでいける…!!と思ったんですが、request.bodyの中身がundefinedになってしまいました。
そこで必要になったのが「body-parser」です。
body-parserを記述する
まずはbody-parserをインストールします。
|
1 |
$ npm install body-parser |
続いて、以下の3行をvar app = express()の下に記述します。
|
1 2 3 |
const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({extended: true})) app.use(bodyParser.json()) |
*サーバー側修正版
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var express = require('express') var app = express() const bodyParser = require('body-parser') app.use(bodyParser.urlencoded({extended: true})) app.use(bodyParser.json()) var server = app.listen(3000, function(){ console.log('server is running on port 3000') }) app.post('/api/', (request, response) => { // 受け取ったデータ console.log(request.body) // 返り値をセット const resultData= { id: request.body.id, name: request.body.name, result: 'OK!!' } response.status(200).send(JSON.stringify(resultData)) }) |
今回、Node.jsを初めて触りましたが、いくつかつまづいた点がありましたので、
他にもご紹介していきたいと思います。
- おすすめ記事
-
-
ノウハウ
2019.01.23 なべっち
-
POPULAR
もきち
Director / Creator
人気記事
