Relation between fetch and post-CodePudding

I dont have any problem about executing program. I have question about two parameters been in different place in file and about their relation. I have a html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<h1>Registration</h1>
<form id="reg-form">
<input type="text" id="username" autocomplete="off" placeholder="Username">
<input type="password" id="password" autocomplete="off" placeholder="Password">
<input type="submit" value="Submit Form">
</form>





<script>
    const form = document.getElementById('reg-form')
    form.addEventListener('submit', registerUser)

    async function registerUser(event){
        event.preventDefault()
        const username = document.getElementById('username').value
        const password = document.getElementById('password').value 

        const result = await fetch('/api/register',{
            method:'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                username,
                password
            })
        }).then((res)=>res.json())
        console.log(result)
       }
    </script>
 </body>
 </html>

and i have a js file:

const express = require('express')
const path = require('path')
const mongoose = require('mongoose') 
const User = require('./model/user')
const bcrypt = require('bcrypt')


mongoose.connect('mongodb://localhost:27017/login-app-db',{
   useNewUrlParser:true,
   useUnifiedTopology:true
})
 const app = express()

 app.use('/', express.static(path.join(__dirname, 'static')))
 app.use(express.json())

 app.post('/api/register', async(req,res)=>{
 console.log(req.body)
 res.json({status:'ok'})

})
app.listen(9999,()=>{
 console.log('Server up at 9999')
})

I have a button when i click that it shows me the values been in username and password input in terminal with console.log.

But the place that i didnt understand is

 const result = await fetch('/api/register'

and

 app.post('/api/register', async(req,res)=>

which one is processing first and what is that "/api/register" actually. Is it a made up path for providing communication between html and js when i click the button if it is like that how is working in behind exactly ?

CodePudding user response：

In your Node.js code, you create an Express server and set up request handlers, app.post('/api/register' ...) being one of them.

In your client code, when you're calling fetch('/api/register', ..., the browser makes a request to http://<your-domain>/api/register and processes the response (if any).

Express is a web-server framework that is built on top of Node.js http module and provides a good amount of utility in terms of routing. Whenever an incoming request is received on the right port by the server, it gets filtered matched against all the handlers you have by comparing its method and path with the ones in the handlers. If a matching handler is found, it gets executed called with the request object passed as the argument. In your case, any POST request made to http://<your-domain>/api/register will be processed by that handler. (you can read more about Express routing here)

/api/register is indeed just a made-up path that provides a structure to your web application API and enforces an interfacing convention - it could've been just as well called /signup or /api/user/registration. People would usually follow REST architecture style when making those up though, where the path would define a resource in the system and method would define the kind of operation applied to the resource. That said, you're free to design your APIs in any way that makes the most sense to you, as long as the convention is enforced in all parts of the system (i.e. client code and server code).