通过axios.post()与数据库建立反应按钮连接

问题描述 投票:0回答:2

我有4个输入和按钮,它从它们获取所有数据并通过axios.post()请求发送到我的PostreSQL数据库。不清楚.then()是如何工作的。所以,这是我的按钮代码,它只调用this.addNewPainting函数:

<button onClick={ this.addNewPainting }>Submit</button>

这是我的addNewPainting函数:

addNewPainting() {
  axios.post(`http://localhost:333/api/add`, {
    title: this.state.titleInput,
    year: this.state.yearInput,
    size: this.state.yearInput,
    location: this.state.locationInput
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

在这个项目之前,我曾经使用this.setState将response.data放到数组中,但是现在我有了数据库而我只是卡住了。

这是我的控制器功能:

add_painting: (req, res, next) => {
  const db = req.app.get('db');
  const { title, year, size, location } = req.body;
  console.log(title, year, size, location);

  db.add_painting([ title, year, size, location ])
    .then( () => res.status(200).send() )
    .then( () => res.status(500).send() );
}

和端点:

app.post('/api/add', paintings_controller.add_painting);
javascript sql node.js postgresql axios
2个回答
2
投票

为了将来阅读(因为你要求它):我不是使用promises的专家,但它的工作方式与AJAX请求类似。

当你向服务器发出请求时(GETPOSTPUT等),你正在等待这个回复(一组数据,一条消息,一个成功/不成功的POST / PUT / DELETE等)。根据响应,您将编码预期事件(errorsuccesscomplete等)。

在这种情况下,你使用axios,一种新的方式来做AJAX请求。 error / success / complete / ...事件的等效方式是then()函数。使用此方法,您可以执行创建新任务的操作,或者只是打印服务器的响应消息(在您的情况下)。

来自MDN

then()方法返回一个Promise。它最多需要两个参数:Promise的成功和失败案例的回调函数。

我们假设我们在AJAX中有这段代码:

$.ajax(
{
    url : yourURL,
    type : 'POST',
    data : yourData,
    datatype : 'json',
    success : function(data) { 
        yourSuccessFunction(data); 
    },
    error : function(jqXHR, textStatus, errorThrown) { 
        yourErrorFunction(); 
    }
});

使用axios,您将编写如下代码:

axios.post('/user', {
    YourData: yourData
}).then(() => { this.yourSuccessFunction() })
}).catch(() => { this.yourErrorFunction() });

1
投票

我刚发现错误。我在axios.post()中向PORT 333发出请求,但服务器正在使用端口3333。

© www.soinside.com 2019 - 2024. All rights reserved.