js的console.log() 在google浏览器打印出现Value below was evaluated just now

我遇到的问题是这样的，就是监听事件，事件触发后使用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();

}