How can I show a notification if the form data was submitted successfully?

Question

How can I implement a notification after the successful submission of form data? Help me, please! There is such an idea (but it doesn't work. Even if sending fails, it displays 'Success' ):

<Form class="order_form" @submit.prevent=""> 
          <div>
            <Field v-model="fio" class="order_input" type="text" placeholder="Name" name="first_name" :rules="[isRequired, validateName]"/>
          </div>
            <ErrorMessage class="errMessage" name="first_name" />             
          <div>
            <Field v-model="phone" class="order_input" type="text" placeholder="Phone" name="phone" :rules="isRequired" />
          </div>
            <ErrorMessage class="errMessage" name="phone" />
         <button class="make_order" @click="postOrder">Send</button>
        </Form>
    <span>{{successMessage}}</span>

...

    data() {
    return {
        successMessage: '',
    }
  },

...

postOrder() {
  const orderDataStr = {fio: this.fio, phone: this.phone}
  axios.post(`${url}`, orderDataStr)
      .then((response) => {
        console.log(response.data);
        this.successMessage = 'Success!';
      })
      .catch((error) => {
        console.log(error);
      });
},

Answer 1

You are assuming incorrectly that in your callback response will always be a successful when in reality you need to check the response for the status of the call you made And then determine if it was a success or a failure.

https://developer.mozilla.org/en-US/docs/Web/API/Response/ok