fetch API 总是返回 {"_U": 0, "_V": 0, "_W": null, "_X": null}

IT技术 mysql node.js reactjs react-native fetch
2021-03-31 21:26:36

下面的代码总是返回下面的有线对象

{“_U”：0，“_V”：0，“_W”：空，“_X”：空}

作为回应。

这是我的代码

    getData = () => {
        fetch('http://192.168.64.1:3000/getAll',{
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then((response) => {
            console.log('Response:')
            console.log(response.json())
            console.info('=================================')
        })
        .catch(err => console.error(err));

    } 

    componentDidMount(){
        this.getData();
    }

我使用 node、express、Mysql 作为后端和 react-native 前端

我的后端代码在这里

app.get('/getAll',(req,res) => {
    console.log('getAll method Called');
    con.query('select * from dummy',(err,results,fields) => {
        if(err) throw err;
        console.log('Response');
        console.log(results);
        res.send(results);
    });
});

上面的代码在控制台中给出了正确的输出，但 fetch API 不是。

我找不到我的问题的解决方案。提前致谢。

3个回答

这表明您在解决之前记录了Promise - 当您执行以下操作时的结果： console.log(response.json())

如何在函数之外访问 promise 回调值？

正如@Evert 在评论中正确指出的那样，这是因为 response.json() 返回一个 promise 对象。

因此，.then()在调用response.json()记录已解决Promise的位置后，您需要链接一个额外的。

getData = () => {
    fetch('http://192.168.64.1:3000/getAll',{
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
}

将async和await添加到您的代码中：

getData = async () => {
   await fetch('http://192.168.64.1:3000/getAll',{
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then((response) => {
        console.log('Response:')
        console.log(response.json())
        console.info('=================================')
    })
    .catch(err => console.error(err));

}

所以问题是你不是在等待你的 Promise 解决，这很容易解决。

try {
  const res = await fetch(
    'your_api',
  );
  const data = await res.json();
} catch (error) {
    console.log(error);
}
其它你可能感兴趣的问题
上一篇使用 reactjs 和 babel 导出函数 下一篇在构造函数中获取数据