Vue | async data()

[Men770]

התחלתי אתמול ללמוד vue, והסתבכתי עכשיו.
אני מנסה לקבל מידע מ-API דרך פונקציית data, ולא מצליח.
אני לוקח את המידע עם fetch, ומקבל Promise.
אם אני עושה ככה:

const data = fetch(config.apiEndpoint + 'book/' + this.$route.params.name).then(res => res.json())
return {
  book: data.book
}

data הוא undefined, כי המידע עוד לא התקבל.
אם אני עושה את זה עם async / await, הפונקציה מחזירה Promise, וvue צריך שהפונקציה תחזיר object..
מה עושים?

[Men770]

ב"ה הסתדרתי לפי הדוגמא כאן.

[dovid]

@men770 לא מסכים עם השאלה, עם await צריך לעבוד מעולה ככה:

const data = await fetch(config.apiEndpoint + 'book/' + this.$route.params.name).then(res => res.json())
return {
  book: data.book
}

או:

var root =  {
  book: data.book
}

fetch(config.apiEndpoint + 'book/' + this.$route.params.name)
        .then(res => res.json())
        .then(x => root.book = x.book);

return root;

[Men770]

@dovid אמר בVue | async data():

@men770 לא מסכים עם השאלה, עם await צריך לעבוד מעולה ככה:

const data = await fetch(config.apiEndpoint + 'book/' + this.$route.params.name).then(res => res.json())
return {
  book: data.book
}

כתבתי שזה לא עובד, כי בדקתי וזה לא עבד..
כשאני עושה את הפונקציה של data בתור async, ‏vue מחזיר שגיאה, כי הפונקציה data צריכה להחזיר object, והיא מחזירה Promise.

[dovid]

@men770 אז הבעיה היא חתימת הפונקציה, כלומר קוד שבכלל לא הבאת פה, גם אם יש לזה פתרון אני לא יודע לומר אותו.

[katz]

@Men770

תגדיר בdata משתנה עם ערך ריק
ואחרי זה תכניס את הפונקציה לתוך mounted
לדוגמא:

mounted() {
fetch(config.apiEndpoint + 'book/' + this.$route.params.name).then(res => res.json())
}

ואחרי זה אתה מוסיף שורה שמכניסה את ה Json לתוך המשתנה שהגדרת

מקווה שהסברתי מספיק טוב!

[katz]

@katz אמר בVue | async data():

@Men770

תגדיר בdata משתנה עם ערך ריק
ואחרי זה תכניס את הפונקציה לתוך mounted
לדוגמא:

mounted() {
fetch(config.apiEndpoint + 'book/' + this.$route.params.name).then(res => res.json())
}

ואחרי זה אתה מוסיף שורה שמכניסה את ה Json לתוך המשתנה שהגדרת

מקווה שהסברתי מספיק טוב!

אחרי זה ראיתי שכבר הסתדרת עם הרעיון הזה, סליחה על התגובה המאוחרת