xiaoluoboding / vue-sonner

🔔 An opinionated toast component for Vue.

Home Page:https://vue-sonner.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Make Promise "awaitable"

BayBreezy opened this issue · comments

Hello,

I was using the package the other day and noticed that using the promise method does not allow me to await the results before moving to the next line in the code.

I have this function that I use with vee-validate. It will send a request to the API. When I use the toast.promise method, the line after gets executed immediately.

const onSubmit = handleSubmit(async (values) => {
  const promise = () => new Promise((resolve) => setTimeout(resolve, 3000));
  // I am usign Nuxt3 and have the `toast` auto-imported as `useSonner`
  // The `await` keyword does nothing here as the `promise` signature is like this: `promise: (promise: PromiseT, data?: PromiseData | undefined) => string | number`
  await useSonner.promise(promise, {
    loading: "Updating your settings...",
    success: (d) =>
      values.notify === "none"
        ? "You will no longer receive notifications"
        : `You will be notified by ${values.notify}`,
    error: (e) => "Error! Your information could not be sent to our servers!",
  });
  // This gets called before the promise is resolved
  console.log("Please wait on the above to finish...");
});

Can this be updated to return a promise please? Thanks.
Something like promise: (promise: PromiseT, data?: PromiseData | undefined) => Promise<string | number>

Hello @xiaoluoboding , Thank you for jumping on this so fast, I appreciate it.
I update the package but i am still having the same issue where calling toast.promise is still not "awaitable"
In addition, the promise toast is now behaving weird. When I call toast.promise, it shows 3 layers of toast like in the image below:

image

This image shows the console statement being logged before the promise is resolved:

image

Any update?

In latest version: (property) promise: <unknown>(promise: PromiseT<unknown>, data?: PromiseData<unknown> | undefined) => string | number | undefined