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](https://private-user-images.githubusercontent.com/53905713/280224817-b92c2621-5303-4fa0-9443-7930ffee61b9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA2MTI3OTMsIm5iZiI6MTcyMDYxMjQ5MywicGF0aCI6Ii81MzkwNTcxMy8yODAyMjQ4MTctYjkyYzI2MjEtNTMwMy00ZmEwLTk0NDMtNzkzMGZmZWU2MWI5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDExNTQ1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFhZmI3OGRiZTNjY2RiYTJjNGIxMjljNzYyZWFmYmIwZTU0ZjRmNWQ5M2U4ZDMyOTcyMzIwMDBmZWEyMWY2NTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4Bf0zm6ePbGAIhgcKoUqtoZtYoZoJl3NBPYBHV18tYc)
This image shows the console statement being logged before the promise is resolved:
![image](https://private-user-images.githubusercontent.com/53905713/280224610-4d7700c2-e9ac-4489-9ec3-3410a9206bcf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA2MTI3OTMsIm5iZiI6MTcyMDYxMjQ5MywicGF0aCI6Ii81MzkwNTcxMy8yODAyMjQ2MTAtNGQ3NzAwYzItZTlhYy00NDg5LTllYzMtMzQxMGE5MjA2YmNmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDExNTQ1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZiNDlhYjJkOTlkZTI1OThhOGVmODgxNDdlZjVjZjBkZWZiYWMwNWEwZmZmYjI3OTExNjNjYWVhYzI1NDA5NWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Pfv8A0xCGwZLbyS-ZvEceNhPJgWnRAGg7pQUlz4eJKM)
Any update?
In latest version: (property) promise: <unknown>(promise: PromiseT<unknown>, data?: PromiseData<unknown> | undefined) => string | number | undefined