javascript - 如何从 axios promise 获取控制台日志

Question

这让我发疯。我无法从我的 axios POST 请求中看到 response 对象。

import React, {
  Component
} from 'react';
import axios from 'axios';

class SignUp extends Component {
  state = {
    name: '',
    email: '',
    password: ''
  };

  handleNameChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  handleEmailChange = e => {
    this.setState({
      email: e.target.value
    });
  };

  handlePasswordChange = e => {
    this.setState({
      password: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const {
      name,
      email,
      password
    } = this.state;
    const user = {
      name: name,
      email: email,
      password: password
    };
    axios
      .post('http://localhost:7777/signup', {
        user
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  render() {
    return ( <
      form className = "form-signin"
      onSubmit = {
        this.handleSubmit
      } >
      <
      h2 className = "form-signin-heading" > Please sign up < /h2> <
      label htmlFor = "inputName"
      className = "sr-only" >
      Name <
      /label> <
      input type = "name"
      name = "name"
      onChange = {
        this.handleNameChange
      }
      id = "inputName"
      className = "form-control"
      placeholder = "Name"
      required /
      >
      <
      label htmlFor = "inputEmail"
      className = "sr-only" >
      Email address <
      /label> <
      input type = "email"
      name = "email"
      onChange = {
        this.handleEmailChange
      }
      id = "inputEmail"
      className = "form-control"
      placeholder = "Email address"
      required /
      >
      <
      label htmlFor = "inputPassword"
      className = "sr-only" >
      Password <
      /label> <
      input type = "password"
      name = "password"
      onChange = {
        this.handlePasswordChange
      }
      id = "inputPassword"
      className = "form-control"
      placeholder = "Password"
      required /
      >

      <
      button className = "btn btn-lg btn-primary btn-block"
      type = "submit" >
      Sign up <
      /button> <
      /form>
    );
  }
}

export default SignUp;

有人请告诉我我错过了什么。我收到服务器 console 消息。但是我在浏览器开发人员工具中看不到该消息。

这是我的后端代码。

const express = require('express');
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

app.use(bodyParser.json());
app.use(cors({
  origin: "http://localhost:3019"
}));

app.post('/signin', function(req, res) {
  let useremail = req.body.email;
  let password = req.body.password;
  if (useremail && password) {
    console.log('success')
  } else {
    console.log('Failure');
  }
});

app.post('/signup', function(req, res) {
  let userfullname = req.body.fullname;
  let useremail = req.body.email;
  let password = req.body.password;
  console.log(`
    Thank you ${userfullname} for signing up, 
    your login credentials are 
    login: ${useremail}
    password: ${password}  
  `)
});

app.listen(7777, function() {
  console.log("Started listening on port", 7777);
})

Answer 1

您需要确保您的请求处理程序 return a response , 根据要求。

例如，您可以发送一个 JSON 响应以向客户端/浏览器发送信号，表明请求已被处理并通过执行以下操作完成:

app.post('/signin', function(req, res) {
  let useremail = req.body.email;
  let password = req.body.password;
  if (useremail && password) {
    console.log('success')
  } else {
    console.log('Failure');
  }

  /* 
  Add this: send a json response to client 
  */
  res.json({ message : 'sign in request completed' });
});

app.post('/signup', function(req, res) {
  let userfullname = req.body.fullname;
  let useremail = req.body.email;
  let password = req.body.password;
  console.log(`
    Thank you ${userfullname} for signing up, 
    your login credentials are 
    login: ${useremail}
    password: ${password}  
  `)

  /* 
  Add this: send a json response to client 
  */
  res.json({ message : 'sign up request completed' });
});

除了json() , express 框架的 Response interface提供其他响应方式，例如 send()和 end()这可能更适合您的用例。

这里的关键概念是传入请求应该有一个相应的响应发送回客户端。这允许客户端正确响应发送到您的服务器的网络请求并从中恢复。