未定義の応答を持つVueJsでの投稿要求

Question

私はVueJsとExpressjの初心者です。私はVuejsのフロントエンドとExpressJsのバックエンドを作ろうとしています。私はバックエンド（expressJs）に投稿リクエストを送ります：

1応答は定義されていません 2同時に私はクロム開発ツールで2つのリクエストを見ることができます。 1つはオプションで、もう1つはポストです。 3-郵便配達員には全く問題はありません。ここで

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のレポに

全体コード：here

Answer 1

になります。 Authentication.registerは、await呼び出しでconst responseを入力するために使用する必要がある、または具体的にはPromiseを返しません。

return HTTP.post('register', credentials);の中にregisterのように戻ってみてください。

これが機能するには、HTTP.post('register', credentials)も返さなければなりません。

Answer 2

私はデータを送信するためにJSON.stringifyを使用し、あなたがオブジェクトを直接送信しているので、

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

はたぶん

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