【问题标题】:Axios then callback not working on successful Post request然后 Axios 回调无法处理成功的 Post 请求
【发布时间】:2021-04-09 21:44:34
【问题描述】:

一直在努力找出用户登录/注册的反应,以及为什么我的 axios 没有在对我的 api 的成功发布请求时调用 .then

服务器.js

//Node packages 
const path = require('path');

//Required NPM Packages
const express                =         require('express'),
      app                    =         express(),
      session                =         require('express-session'),
      cors                   =         require('cors'),
      bodyParser             =         require('body-parser'),
      mongoose               =         require('mongoose'),
      MongoStore             =         require('connect-mongo')(session),
      methodOverride         =         require('method-override'),
      passport               =         require('passport'),
      LocalStrategy          =         require('passport-local');


//MongoDB models.
const Product                =         require('./models/Product');
const User                   =         require('./models/User');

//Routes.
const indexRoute             =         require('./routes/index');
const demoRoute              =         require('./routes/demos');
const blogRoutes             =         require('./routes/blogs');
const userRoutes             =         require('./routes/users');

//Port.
const PORT = 5000;
const DATABASE_URI = require('./config/database');
const mongoOptions = { useNewUrlParser:true, useUnifiedTopology:true};


//Connect to mongoDB.
mongoose.connect(DATABASE_URI, mongoOptions);

const sessionOptions = {
    secret: 'somesecretword',
    resave: true,
    saveUninitialized: true,
    store: new MongoStore({ mongooseConnection: mongoose.connection })
}

//set session options 
app.use(session(sessionOptions));



//Setup body-parser.
app.use(express.json());
app.use(bodyParser.urlencoded({extended:true}));


//Allow express/node to accept Cross-origin resource sharing.
app.use(cors());

app.use(express.static(path.join(__dirname, '..','client','build')));

//Setup method override.
app.use(methodOverride("_method"));

//Congifure passport.

app.use(passport.initialize());
app.use(passport.session());

passport.use(new LocalStrategy(User.authenticate()));

passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

app.use(function(req,res,next){
    res.locals.currentUser = req.user;
    next();
})



//register API routes to express.
app.use('/', indexRoute);
app.use('/demos', demoRoute);
app.use('/blogs', blogRoutes);
app.use('/users', userRoutes);

// //Register React routes to express
app.use('about', express.static(path.join(__dirname, '..','client','build')));

app.get('*', (req,res)=> {
    res.sendFile(path.join(__dirname,'..','client','build','index.html'));
})

//listen to established port.
app.listen(PORT, () => {
    console.log(`The server has started on port ${PORT}!`);
});


module.exports = app;

登录路径

router.post('/login', passport.authenticate('local'), (req, res) => {
   console.log('success');
  
   res.json({authenticated:true});
});

React 前端函数

 async function handleRegister(evt){

       //Prevent default form redirect.
       evt.preventDefault();

       //Create a new user objec to pass into axios
       const user = {
           username: username,
           password: password
       }

       //Send axios post request to nodeJS API.
       await axios.post("http://*******/users/register", user)
       .then((res) => {
         console.log(res.data);

      })
       .catch((err) => {
           console.log(err);
       });

       //Push react history back to index page.
      
   }

现在我正在使用 Passport.js 和 passport.local.mongoose 策略和 connect-mongo。当我继续使用正确的用户信息发布到登录路径时,后端的回调返回成功。根据 passport.authenticate 方法,如果身份验证成功,那么我们 console.log 并发送 res.json

我尝试使用res.send, res.json, res.sendStatus,但它们似乎都不起作用。我是否缺少某种护照设置?就护照本地猫鼬的文档而言,我不必建立配置。

我想要发生的事情是,当我登录时,我发送一个重定向来响应并通过 history.push(routeUrl); 将响应路由推送到 react-router 的历史对象;

【问题讨论】:

  • 您将async/await 语法与.then 语法混合在一起。使用其中一种,它们不兼容
  • 您是否在“网络”选项卡中收到响应?可能是cors的问题。如果可能,请分享控制台和网络选项卡的屏幕截图。此外,您的代码(在服务器端)中缺少 /users/register 路由。
  • 那么你是说你在 axios 中的 POST 请求总是采用.catch 路径?一直没解决?
  • 我想用 axios 来确保我们得到响应,我们必须使用等待?还是只有在我们不做 .then 之后才这样做?仍在学习 axios 和 async 函数的来龙去脉。
  • 不,使用了async/await,因此您可以编写异步代码,就好像它是同步的,而不是使用.then 回调。这是一种通用的 Javascript 语法,与 axios 无关。如果您查看 axios 的 Github 页面,大多数示例使用 .then 但在示例部分中您可以找到 async/await 的示例 github.com/axios/axios#example

标签: node.js reactjs mongodb express react-router


【解决方案1】:

我发现了问题。只是我的一个错误。正在使用注册功能而不是登录功能。问题不在于我没有得到回应……可能是排队等候休息。

【讨论】:

    猜你喜欢
    • 2016-04-13
    • 2019-06-09
    • 1970-01-01
    • 1970-01-01
    • 2016-09-29
    • 2015-11-18
    • 1970-01-01
    • 1970-01-01
    • 2019-11-18
    相关资源
    最近更新 更多