Vue js: Async await с vue js возвращает наблюдателя
В настоящее время я пытаюсь получить данные из api и прочитать их в массиве. Проблема в
когда я регистрирую данные ответа от API, он показывает данные. Я присваиваю значение переменной данным из await. Когда я console.info, он показывает, что значение переменной obsever. Пробовал с async/await. Установлен
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories: []
};
},
created() {},
methods: {
async getCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
mounted() {
this.getCategories(); // removed and tried adding this line again
console.info("cat ", this.categories);
}
};
Вот что я получаю: cat -> [__ob__: Observer]
Этот метод тоже, похоже, не помогает. Что я делаю неправильно?
Я часами борюсь с этой проблемой. Проверено много опций в stackoverflow, но ни один из них не работает (или я делаю что-то не так). Я новичок в vuejs, буду очень рад ответам!
как я могу преобразовать его в json? Не могли бы вы помочь? JSON.parse(this.categories) и methods: { async getCategories() { await axios.get( $ {baseUrl} / feedback / search).then(res => { console.info("res is ", res); this.categories = res.data.json(); return res.data; }); } }, mounted() { this.getCategories(); console.info("cat ", this.categories); }
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы регистрируете this.categories до того, как this.getCategories() будет разрешен, и в этом случае this.categories все равно будет пустым массивом. Обратите внимание, что свойство __ob__ автоматически вставляется Vue и используется для реактивности.
Вам следует заранее указать await этим методом:
async mounted() {
await this.getCategories();
console.info("cat ", this.categories);
}
Он возвращает cat Promise {<pending>} для `методов: {async getCategories () {this.categories = axios.get (${baseUrl}/feedback/search) .then (res => {console.info (" res is ", res); return res.data;}) ; }}, async смонтирован () {ожидание this.getCategories (); console.info («кот», this.categories); } `
Похоже, вы удалили await при назначении this.categories. Единственное изменение, необходимое в исходном коде, - это префикс mounted на async, а затем добавление await в mounted(). См. демонстрация
Не могли бы вы попробовать это?
const baseUrl = "http://...";
export default {
name: "report",
data() {
return {
selected: "",
categories: []
};
},
created() {},
methods: {
async imageCategories() {
this.categories = await axios
.get(`${baseUrl}/feedback/search`)
.then(res => {
return res.data;
});
}
},
async mounted() {
await this.getCategories(); // removed and tried adding this line again
console.info("cat ", this.categories);
}
};
Я думаю, что в параметрах методов должно быть getCategories (), а не imageCategories (). Не работал и с исправлением имени функции. Я пробовал это раньше. Но спасибо за ответ.
Вы можете просто войти в систему после получения данных
async getCategories() {
const res = await axios.get(`${baseUrl}/feedback/search`)
const data = await res.data
console.info('cat ',data)
this.categories = data
}
Пробовал этот methods: { async getCategories() { const response = await axios.get( $ {baseUrl} / feedback / search); const data = await response.data; console.info("data", data); this.categories = data; console.info("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.info("cat ", this.categories); }'. Didn't solve the problem. Отпечатки: data {data: Array(11)}cat {__ob__: Observer}cat {__ob__: Observer}
@Nodirabegimxonoyim данные напечатаны неправильно?
Да, ответ от api печатается, но опять же, когда я читаю, он не показывает результат. Показывая, что это наблюдатель. Кроме того, я распечатываю его, чтобы проверить, получаю ли я правильные данные You can simply log after received the data, потому что я хочу использовать данные в форме
@Nodirabegimxonoyim вы можете попробовать console.info(this.categories.concat([]))?
Он показывает следующую ошибку. Uncaught (in promise) TypeError: _this.categories.concat is not a function. Я не понимаю, почему это происходит. Следует обновить вопрос с моими .babelrc и webpack.config.js?
как насчет console.info(this.categories.data.concat([]))
Привет! Ты спас мне нервы! Спасибо! Я пробовал: methods: { async getCategories() { const response = await axios.get( $ {baseUrl} / feedback / search); const data = await response.data; console.info("data", data); this.categories = data.data.concat([]); console.info("cat ", this.categories); } }, async mounted() { await this.getCategories(); // removed and tried adding this line again console.info("cat ", this.categories); }. Я назначил .data.concat([]) ответа, и он показывает результат. Кроме того, форма показывает данные. Большое спасибо!
вы не делаете ничего плохого (хотя async / awaits бесполезны),
this.categories- это наблюдатель, созданныйvue