Use Promise instead of callbacks for router.

[xsjcTony]

What about we switch to Promise instead of relying on callbacks? I think async / await is the modern way to handle async actions.

Let me provide a valid example:

This is Ant Design's Form onFinish function, which relies on Promise to automatically handle the loading state. I have to manually wrap it in a Promise in order to make it work. This is less ideal and a bit frustrating🤣.

I understand there's a useForm hook provided by Inertia, but when you want to integrate with some third party encapsulated forms, it's not that suitable.

const onFinish: LoginFormProps<LoginFormData>['onFinish'] = async (values) => {
  const result = await new Promise((resolve, reject) => {
    router.post(route('login'), values, {
      onSuccess: (data) => {
        resolve({ status: 'ok', data });
      },
      onError: (error) => {
        resolve({ status: 'error', error });
      },
    });
  });

  console.log(result)
};

[RobertBoes]

IIRC Inertia used promises at first, but people used it the same way they'd use Adios for example. Inertia doesn't work that way, it's not a replacement for Axios or similar to it, it's a router. So with a promise you'd expect just the data, while Inertia has side effects. Think that was the main reason promises from visits were removed

[xsjcTony]

Right. 🤔 Seems I have to wrap it myself for those third-party functionalities that relies on Promise

[craigrileyuk]

Inertia's router also provides a lot more callbacks than a simple then/catch/finally on a Promise would be able to handle.

If you check the docs on manual visits, you'll see that the following are available:

onCancelToken: cancelToken => {},
onCancel: () => {},
onBefore: visit => {},
onStart: visit => {},
onProgress: progress => {},
onSuccess: page => {},
onError: errors => {},
onFinish: visit => {},

Switching to promises would lose the majority of those options.

[xsjcTony]

Yeah I see.. guess I have to, manually invoke "setIsLoading" in onFinish🤣

[eso8086]

what about this solution?

  async function onSubmit(data) {
        await new Promise((resolve, reject)=>{
            router.patch(route('profile.update'), data, {
                onSuccess: resolve,
                onError: reject,
            });
        })
    }
    
    

[ericamigo]

how did i miss this response!? 😆 you save me today! 💯

[FahriDevZ]

but when the response is not from inertia, onSuccess and onError are never called