问题
I am using axios to perform post request to Node.js. The data does arrive the backend and I can perform some action with it. However, in the network, it always stay pending.
Example routers are following:
handleSubmit(e){
e.preventDefault();
var added = this.getAddedItems()
console.log("added is", added)
if(added.length > 0){
for(let i of added){
console.log(i)
}
axios({ method: 'post', url: '/add', data: added})
}
}
handleDelete(e,desc){
e.preventDefault()
axios({method: "post", url: "/remove", data:{name: desc}})
var newTotal = 0;
var newArray = this.state.testData.filter(function(obj){
return obj.desc !== desc
})
newArray.map(item => (
newTotal += item.total
))
console.log(newTotal)
this.setState({
testData: newArray,
total: newTotal
})
}
handleSubmit(e){
e.preventDefault()
var remain = this.state.wallet - this.state.total
this.setState({
buyAttempt: true,
})
console.log("remain is " + remain)
console.log("length " + this.state.testData.length)
if(remain >= 0 && this.state.testData.length > 0){
this.setState({buySuccessful: true})
axios({ method: 'post', url: '/buy', data: { amount : remain}})
this.setState({
wallet:remain,
testData: [],
//itemNum:0
})
}
}
These are the methods from my component. They all perform post request. The backend is actually receiving the data so I did not notice it. However, recently my app broke and I am suspecting that it is because of the never-ending pending.
I am also getting error message that will literally break my app
POST http://localhost:3000/add net::ERR_EMPTY_RESPONSE
Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)
POST http://localhost:3000/buynet::ERR_EMPTY_RESPONSE
Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)
POST http://localhost:3000/remove net::ERR_EMPTY_RESPONSE
Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)
What I need help with: 1: How to fix this problem 2: Is there a better alternative way(react's natural way of performing post request)
My server.js
app.post('/buy', (req, res) => {
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
if (err) console.log(err);
var dbo = db.db("wallet");
var myquery = { amount: {$gt: 0} }
var newquery = { $set: {amount: req.body.amount}}
dbo.collection("account").updateOne(myquery, newquery, function(err, re) {
if (err) console.log(err);
console.log("Wallet updated:", req.body.amount )
db.close();
});
});
MongoClient.connect(url, { useNewUrlParser: true}, function(err, db) {
if (err) console.log(err);
var dbo = db.db("cart");
dbo.collection("items").deleteMany({}, function(err, res){
if (err) console.log(err);
console.log("numer of data deleted " + res.deletedCount)
db.close();
});
});
});
app.post('/remove', (req,res) => {
MongoClient.connect(url, { useNewUrlParser: true}, function(err,db){
if (err) console.log(err);
var dbo = db.db("cart");
var myquery = { desc: req.body.name}
console.log(req.body.name)
dbo.collection("items").deleteMany(myquery, function(err,res){
if(err) console.log(err);
console.log("Numer of record deleted " + res.deletedCount)
db.close();
})
})
})
app.post('/add', (req, res) => {
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
if (err) throw err;
var dbo = db.db("cart");
var objs = req.body;
dbo.collection("items").insertMany(objs, function(err, result) {
if (err) console.log(err);
console.log("Number of documents inserted: " + result.insertedCount);
db.close()
});
});
});
Package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"express": "^4.16.3",
"mongodb": "^3.1.6",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-html-parser": "^2.0.2",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"reactstrap": "^6.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}
回答1:
The issue is you are not sending resposne back in api call. You need to send response in every api call like I mentioned below
app.post('/buy', (req, res) => {
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
if (err) console.log(err);
var dbo = db.db("wallet");
var myquery = { amount: {$gt: 0} }
var newquery = { $set: {amount: req.body.amount}}
dbo.collection("account").updateOne(myquery, newquery, function(err, result) {
if (err) console.log(err);
res.send("Wallet updated);
//if you want to send in json format then
res.json({"message": "Wallet updated", "result": result});
console.log("Wallet updated:", req.body.amount )
db.close();
});
});
MongoClient.connect(url, { useNewUrlParser: true}, function(err, db) {
if (err) console.log(err);
var dbo = db.db("cart");
dbo.collection("items").deleteMany({}, function(err, result){
if (err) console.log(err);
res.send("numer of data deleted " + result.deletedCount)
db.close();
});
});
});
app.post('/remove', (req,res) => {
MongoClient.connect(url, { useNewUrlParser: true}, function(err,db){
if (err) console.log(err);
var dbo = db.db("cart");
var myquery = { desc: req.body.name}
console.log(req.body.name)
dbo.collection("items").deleteMany(myquery, function(err,result){
if(err) console.log(err);
res.send("Numer of record deleted " + result.deletedCount)
db.close();
})
})
})
app.post('/add', (req, res) => {
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
if (err) throw err;
var dbo = db.db("cart");
var objs = req.body;
dbo.collection("items").insertMany(objs, function(err, result) {
if (err) console.log(err);
res.send("Number of documents inserted: " + result.insertedCount);
db.close()
});
});
});
Also in every api call you have res twice so change one res to result or any name on your choice. because node will get confused about two res. So I have changed res to result in every api call.
来源：https://stackoverflow.com/questions/52652872/react-js-axois-post-stay-on-pendingbut-i-am-getting-data