我遇到的问题是这样的,就是监听事件,事件触发后使用Ajax接收后台返回的数据后,用console.log()打印数据出现了Value below was evaluated just now。而且数据无法下拉查看
后端代码:
router.get('/getPhotos', async ctx => {
// 从数据库获取上传后的所有图片数据,通过json格式返回给客户端
// todos
// ctx.set('content-type', 'application/json');
let data = await query(
"select * from `photos`"
)
console.log(data);
ctx.body = data;
})
前端代码:
window.onbeforeunload = function() {
let xhr = new XMLHttpRequest();
xhr.open('get', '/getPhotos', true);
xhr.onload = function() {
let data = JSON.parse(xhr.responseText);
console.log(data);
// let dk = document.querySelector('.dk');
// let data = JSON.parse(xhr.responseText);
// let src = '/static/upload/' + data.data[0].filename;
// dk.append(`<img src="${src}" alt=""></img>`);
}
xhr.send();
}
查看国外资料后发现主要是因为异步,而console.log是同步执行,所以出现了Value below was evaluated just now。如果你想查看数据,可以通过以下方式。
1.通过forEach循环输出数据
let data = JSON.parse(xhr.responseText);
data.forEach(d => {
console.log(d);
})
2.去掉监听事件
getPhotos()
function getPhotos() {
let xhr = new XMLHttpRequest();
xhr.open('get', '/getPhotos', true);
xhr.onload = function() {
let data = JSON.parse(xhr.responseText);
data.forEach(d => {
console.log(d);
})
// let dk = document.querySelector('.dk');
// let data = JSON.parse(xhr.responseText);
// let src = '/static/upload/' + data.data[0].filename;
// dk.append(`<img src="${src}" alt=""></img>`);
}
xhr.send();
}