使用未定义的响应在VueJs中发布请求

时间:2017-11-13 17:18:44

标签: javascript node.js express vue.js

我是VueJs和Expressjs的初学者。我试图通过Vuejs和ExpressJs的后端制作前端。我发送一个帖子请求到后端(expressJs)和:

1-响应未定义 2-同时我可以在chrome开发工具中看到2个请求。一个是Option,另一个是Post。 3-对邮递员来说没有任何问题。

enter image description here

以下是express

中app.js的代码

console.log('Server is running')

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

app = new express();

//Setup middleware
app.use(cors());
app.use(morgan('combined'))
app.use(bodyParser.json())

app.post('/register', (req, res, next) => {
    res.send({
        message: `Hello ${req.body.email}! your user was registered!`
    })
});

app.listen(8081);

以下是VueJs中的代码:

// Api Setting

import axios from 'axios'

export const HTTP = axios.create({
    baseURL: `http://localhost:8081`
  });



// AuthenticationService

import { HTTP } from '../services/Api'

export default {

  register(credentials) {
     HTTP.post('register', credentials);
  }
}



// Register Component 
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
   
   async register() {
        const response = await AuthenticationService.register({
        email: this.email,
        password: this.password
      });

      console.log(response);  // the value is undefined
    }
  }
};

我真的不知道我在这里错过了什么,我得到了一个未定义的响应和2个请求同时。我很欣赏任何提示。

github repo上的整个代码:here

2 个答案:

答案 0 :(得分:1)

我使用JSON.stringify发送数据,你直接发送对象,所以

register(credentials) {
    HTTP.post('register', credentials);
}

变为

register(credentials) {
    HTTP.post('register', JSON.stringify(credentials));
}

答案 1 :(得分:1)

也许。 Authentication.register未返回任何内容或更具体的Promise,应该用于填充const response来电中的await

尝试在return HTTP.post('register', credentials);内返回类似内容:register

为了使其工作,HTTP.post('register', credentials)也应该返回一些内容。