Forget about axios, this new tool makes automatic data fetching a breeze!

Shocked? This form submission strategy is even stronger than react-query!

Hey, my fellow front-end developers! Today I'm going to share with you a super useful thing - the form submission strategy. To be honest, you guys must have had a headache with all the details of form submission, right? Don't worry, I recently found a tool that really helped me a lot, and it makes form submission simple and efficient. Let me share this magical assistant with you today!

alovajs: The Powerful Helper for Form Submission

When it comes to form submission strategy, we can't help but mention the awesome tool called alovajs. alovajs is a next-generation request tool that simplifies the request process. To be honest, it not only provides a more modern openapi generation solution, but also offers high-quality request strategies for various request scenarios. Compared to libraries like react-query and swrjs, alovajs is much smoother to use, allowing us to implement specific scenarios with very little code.

If you want to learn more about alovajs, you can check out the official website: https://alova.js.org. Believe me, you'll discover a whole new world of requests!

alovajs' Form Submission Strategy

Now, let's take a look at how alovajs' form submission strategy is used. In my opinion, these features are really thoughtful!

Basic Usage

First, let's look at the basic usage:

const submitData = data => {
  return alovaInstance.Post('/api/submit', data);
};

const {
  loading: submiting,
  form,
  send: submit,
  onSuccess,
  onError,
  onComplete
} = useForm(
  formData => {
    return submitData(formData);
  },
  {
    initialForm: {
      name: '',
      cls: '1'
    }
  }
);

This code looks pretty simple, right? But it's already handled a lot of details for us. When I first used it, I was really amazed by its conciseness!

Automatic Form Reset

Automatic form reset after submission? No problem! Just set a parameter:

useForm(submitData, {
  resetAfterSubmiting: true
});

This feature really saved me a lot of trouble. No more manual form reset!

Update Form Data

Need to update form data? Also very simple:

const { updateForm } = useForm(submitData, {
  initialForm: {
    name: '',
    cls: '1'
  }
});

onSuccess(({ data }) => {
  updateForm({
    name: data.name,
    cls: data.cls
  });
});

This feature is a lifesaver for editing forms!

Form Draft Function

alovajs also provides a form draft function, which can restore form data even after refreshing the page:

useForm(submitData, {
  store: true
});

To be honest, this feature has solved a lot of my troubles. No more worrying about losing data when accidentally refreshing the page!

Multi-page/Multi-step Form

The most surprising thing to me is its multi-page/multi-step form function. Just set an id, and you can share the same form data across different pages:

// Component A
const returnStates = useForm(submitData, {
  initialForm: {
    step1Input: '',
    step2Input: '',
    step3Input: ''
  },
  id: 'testForm'
});

// Component B, Component C
const returnStates = useForm(submitData, {
  id: 'testForm'
});

This way, we can easily handle complex multi-step forms. To be honest, this feature has saved me a lot of trouble!

Conditional Filtering

Finally, if you need to do conditional filtering, alovajs also provides a convenient way:

const { send: searchData } = useForm(queryCity, {
  initialForm: {
    cityName: ''
  },
  immediate: true
});

This feature is really handy for scenarios that require real-time searching!

Summary

After seeing all this, don't you think alovajs' form submission strategy is really powerful? It not only simplifies our code, but also helps us solve many common form problems. After using it, I feel my development efficiency has improved a lot, and the code has become much clearer and easier to understand.

So, how do you guys usually deal with form submission? Have you encountered any tricky problems? You might as well try alovajs, and it might bring you unexpected surprises. Welcome to share your thoughts and experiences in the comments, let's progress together and build better front-end applications!