2017-05-18 3 views
0

JS、Node、およびExpressを使用してビューをレンダリングしようとしましたが、このエラーが発生しました。 '未処理拒否エラー:送信されました。私はそれが非同期コールバックと関係があることを知っていますが、 それを修正する方法は正確には分かりません。未処理拒否エラー:ノードを使用して送信された後にヘッダーを設定できない

問題はres.redirect(データを削除しても表示されません)ではなく、res.rendervar spacesがEJSに正しく読み込まれていないと思われます。 spacesと入力すると、 "object promise"というメッセージが表示されます。

const userController = require('../controllers').user; 
const spaceController = require('../controllers').space; 

module.exports = (app) => { 
    app.get('/', function(req, res) { 
     res.render('index.ejs'); 
    }); 

    app.post('/users/new', function(req,res){ 
    userController.create(req,res); 
    res.redirect('/'); 
    }); 

    app.get('/spaces', function(req, res) { 
    var spaces = spaceController.retrieve(req,res); 
    res.render('spaces/index.ejs', {spaces}); 

    }); 

    app.get('/spaces/new', function(req, res) { 
    res.render('spaces/new.ejs'); 
    }); 

    app.post('/spaces/new', function(req,res){ 
    spaceController.create(req,res); 
    res.redirect('/spaces'); 
    }); 

}; 

そして、私のコントローラ:

const Space = require('../models').Space; 

module.exports = { 
    create(req, res) { 
    return Space 
    .create({ 
     name: req.body.name, 
     description: req.body.description, 
     price: req.body.price, 
    }) 
    .then(space => res.status(201).send(space)) 
    .catch(error => res.status(400).send(error)); 
    }, 

    retrieve(req, res) { 
    return Space 
    .findAll() 
    .then(space => { 
     if (!space) { 
     return res.status(404).send({ 
      message: 'Space Not Found', 
     }); 
     } 
     return res.status(200).send(space); 
    }) 
    .catch(error => res.status(400).send(error)); 
    }, 
}; 

そして、私のビュー:

<!doctype html> 
<html> 
<head> 
    <title>MakersBnB</title> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- load bootstrap css --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!-- load fontawesome --> 
    <style> 
     body  { padding-top:80px; } 
    </style> 
</head> 
<body> 
<div class="container"> 

<div class="col-sm-6 col-sm-offset-3"> 
    <div class="jumbotron text-center"> 

    <h1>Book a Space</h1> 

<form action="/spaces/new" method="get"> 
    <button type="submit" class="btn btn-warning btn-lg">List a space</button> 

</form> 

<div class="spaces"> 
    <% spaces.each(function(space) { %> 
     <ul> 
      <li><%= space.name %></a></li> 
      <li><%= space.description %></li> 
      <li>£ <%= space.price %></li> 
     </ul> 
     <% });%> 
</div> 


</div> 

</div> 
</body> 
</html> 
+0

問題:

app.post('/users/new', userController.create); 

コントローラ機能のボディに、あなたも

app.get('/spaces', spaceController.retrieve); 

をレンダリングするためにどのルートを選択することができ、コントローラでコントローラが要求に応答し、ルータも応答します。例えば、app.get( '/ spaces' – yBrodsky

答えて

0

いくつかのリクエストに対して複数の応答を送信しているため、このエラーが発生しています。要求に対して1つの応答しか送信できません。

たとえば、/users/newルートでは、まずuserController.createを呼び出します。 userController.createは、関数の本体の一部として応答を送信します。

あなたのコードは/users/newルートのコールバックに戻ってres.redirect('/')を呼び出し、/ルートを呼び出し、応答も返されます。

修正するには、コントローラが応答を送信するようにします。例えば

retrieve(req, res) { 
    return Space 
    .findAll() 
    .then(spaces => { 
     if (!spaces) { 
     return res.status(404).send({ 
      message: 'Space Not Found', 
     }); 
     } 
     return res.status(200).render('spaces/index.ejs', {spaces}); 
    }) 
    .catch(error => res.status(400).send(error)); 
    }, 
0

これらのルート

app.post('/users/new', function(req,res){ 
    userController.create(req,res); 
    res.redirect('/'); 
    }); 

    app.get('/spaces', function(req, res) { 
    var spaces = spaceController.retrieve(req,res); 
    res.render('spaces/index.ejs', {spaces}); 

    }) 
app.post('/spaces/new', function(req,res){ 
    spaceController.create(req,res); 
    res.redirect('/spaces'); 
    }); 

spaceController内部ロジックはすでにクライアントの非同期への応答を処理(成功と失敗の両方)

ただし、後で非同期応答を送信できないようにする同期応答を即時に送信します(res.redirect)。例外が発生します。

3ルートからres.redirect命令を削除すると修正されます。

+0

残念ながら、修正していない - 問題は 'res.render'と' var spaces'がEJSに正しくロードされていないことによると思います。 '、私たちは"オブジェクトPromise "というメッセージを受け取ります。 –

+1

例外はかなり自明です。あなたが既にコードを送信したときに、クライアントに応答を送信しようとしています。レスポンスを返送する際の例外的なフォーカス – Karim

0
app.post('/users/new', function(req,res){ 
    userController.create(req,res); 
    res.redirect('/'); 
    }); 

Space.create()は基本的に非同期として開始され、終了する前にリダイレクトで応答します。このミドルウェア

app.post('/users/new', 
     userController.create, 
     (res,req) => res.status(200).send(res.locals.space) 
    ); 
この

create(req, res, next) { 
    return Space 
    .create({ 
     name: req.body.name, 
     description: req.body.description, 
     price: req.body.price, 
    }) 
    .then((space) => {  
     res.locals.space = space || {}; 
     return next(); 
    }) 
    .catch(error => next(error)); 
    } 

よう

あなたはリダイレクトがそれに到達することはありませんが、あなたはuserController.create(次返す可能性があり

app.post('/users/new', 
     userController.create, 
     (res,req) => res.redirect('/') 
    ); 

を試みることができます)

最近のプロジェクトの例: https://github.com/JellyKid/ballsavr/tree/master/Backend/lib

関連する問題