Now, let's implement the register() method itself, starting with configuring axios as follows.

Let's have a look at the frontend/src/main.js file:

import router from './router'
import axios from 'axios'

// Bootstrap axios
axios.defaults.baseURL = '/api'
axios.defaults.headers.common.Accept = 'application/json'
axios.interceptors.response.use(
  response => response,
  (error) => {
    return Promise.reject(error)
  }
)

As you can see, in the main.js file, we configure baseURL so that we don't have to add /api for every request. We make it clear that we only accept responses in JSON format, and we also add an interceptor to the response to propagate errors.

Now, let's change the register() method of registrationService to the following:

import axios from 'axios'

export default {
  register (detail) {
    return new Promise((resolve, reject) => {
      axios.post('/registrations', detail).then(({data}) => {
        resolve(data)
      }).catch((error) => {
        reject(error)
      })
    })
  }
}

As you can see, we send a HTTP POST request to the backend with the registration details as the request body. When the request succeeds, we return the response to the caller. When it fails, we reject the error.

Now if we run the npm run test:unit command, we should see all tests pass.

By now, we have finished what we planned for this section. If you start the frontend with the npm run serve command and go to the register page, then click the Create account button, you will see an error similar to the one shown in Figure 9.4. If you check the log printed in the Terminal, you can see that there is a proxy error. This is because we haven't built the API handler for /api/registrations yet:

Let's run the mvn clean install command before committing the code. As you should see, all tests pass, and the following is the commit history: