j.s- איך לחכות לפונקציה אסינכרונית שלא מחזירה הבטחה ?
-
(הדוגמאות הם בvue וvuex אך זה שאלה כללית בכל פונקציה אסינכרונית שלא מחזירה הבטחה - כי אין return )
יש לי פונקציה בvuex שמאמתת את היוזר ומעדכנת את ה state זה כמובן פועל בצורה אסינכרונית כי צריך לשלוח לשרת את הטוקן לבדיקה וזיהוי ורק אז מעדכן את ה state.import { createStore } from 'vuex' import axios from "axios"; export default createStore({ state: { user: null, admin: false }, mutations: { async getToken(state){ const {data} = await axios.get('http://localhost:3001/users/token',{ withCredentials: true }) if(data) { state.user = data.user state.admin = data.admin } }
אני רוצה בעת הניתוב שבדפים מסוימים יהיה גישה רק אם המשתמש מזוהה, ואם המשתמש לא מזוהה הטוקן ישלח לבדיקה ואם התשובה שלילית המשתמש ינותב לדף אחר. הבעיה שזה לא עובד כי הוא לא מחכה לפונקציה כי זה לא מחזיר הבטחה.
זה הקוד בניתוב (beforeEnter זה הוק לפני הניתוב בפועל)
{ path: '/publish', component: Publish, beforeEnter: async (to, from) => { if (!store.state.user) { await store.commit('getToken') if (!store.state.user) return '/login' } } },
-
@ב-ל המילים "פונקציה אסינכרונית שלא מחזירה הבטחה" הם דבר והיפוכו. פונקציה אסינכרונית תמיד מחזירה פרומיס. בלי יוצא מן הכלל. אם הפונקציה לא מחזירה שום ערך, אז הערך העתידי של הפרומיס יהיה
undefined
, אחרת זה יהיה הערך שהפונקציה מחזירה. (זכור: לא להחזיר ערך מפונקציה זה כמו לכתוב:return undefined
)ואם כן, מה באמת הסיבה שהקוד שלך לא מחכה לביצוע פונקציית
getToken
?
זה קשור להבדל בין mutation ל-action ב-vuex.
mutation חייב להיות סינכרוני, (וגם אם תעשה את זה אסינכרוני, Vuex יתייחס אליו כאילו הוא סינכרוני)
לעומת זה, action יכול להיות אסינכרוני, ו-vue יכבד את זה ויחכה לביצועם של פרומיסים בתוך actions.
https://vuex.vuejs.org/guide/mutations.html#mutations-must-be-synchronous -
@yossiz אמר בj.s- איך לחכות לפונקציה אסינכרונית שלא מחזירה הבטחה ?:
ואם כן, מה באמת הסיבה שהקוד שלך לא מחכה לביצוע פונקציית getToken?
זה קשור להבדל בין mutation ל-action ב-vuex.
mutation חייב להיות סינכרוני, (וגם אם תעשה את זה אסינכרוני, Vuex יתייחס אליו כאילו הוא סינכרוני)
לעומת זה, action יכול להיות אסינכרוני, ו-vue יכבד את זה ויחכה לביצועם של פרומיסים בתוך actions.תודה רבה על ההסבר המפורט . אכן זה עובד!
(פשוט עברתי על התיעוד של vuex ממש מלמעלה ולכן הלכתי להמציא כל מיני הסברים למה זה לא עובד..)