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();

}

猜你喜欢

转载自blog.csdn.net/a66666_/article/details/109465350