Question

我想从我正在执行的api调用中检索JSON响应。例如，我想检索如下内容：

{“错误”：{}，“成功”：true，“数据”：{“用户”：“ tom”，“密码”：“ 123”，“技能”：“初学者”，“年份”： 2019，“ month”：“ Mar”，“ day”：31，“ playmorning”：0：“ playafternoon”：1，“ playevening”：1}}

这是我在React中使用fetch进行的API调用。（是的，我知道在URL中发送密码是错误的，这是针对学校项目的）

        fetch('/api/user/'+ user + '?password=' + password, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }}).then((res) => {
                console.log(res); //I want to get the JSON stuff here
              })

这是我正在调用的API。

app.get('/api/user/:user', function (req, res) {
    // console.log(JSON.stringify(req));
    // var user = req.body.user;
    // var password = req.body.password;

    var user = req.params.user;
    var password = req.query.password;

    console.log(user, password);

    var result = { error: {} , success:false};
    if(user==""){
        result["error"]["user"]="user not supplied";
    }
    if(password==""){
        result["error"]["password"]="password not supplied";
    }
    if(isEmptyObject(result["error"])){
        let sql = 'SELECT * FROM user WHERE user=? and password=?;';
        db.get(sql, [user, password], function (err, row){
            if (err) {
                res.status(500); 
                    result["error"]["db"] = err.message;
            } else if (row) {
                res.status(200);
                result.data = row;
                result.success = true;
            } else {
                res.status(401);
                result.success = false;
                    result["error"]["login"] = "login failed";
            }
            res.json(result);
        });
    } else {
        res.status(400);
        res.json(result);
    }
});

在fetch调用中执行console.log（res）时，将显示以下内容：

响应{类型：“基本”，网址：“ http://localhost:3000/api/user/tim?password=123”，重定向：false，状态：200，确定：true，...}正文：（...）bodyUsed：falseheaders：Headers {} ok ：true重定向：falsestatus：200statusText：“确定”类型：“ basic” url：“ http://localhost:3000/api/user/tim?password=123” proto ：响应

当我访问该网站时，输出为：

{“错误”：{}，“成功”：true，“数据”：{“用户”：“ tom”，“密码”：“ 123”，“技能”：“初学者”，“年份”： 2019，“ month”：“ Mar”，“ day”：31，“ playmorning”：0：“ playafternoon”：1，“ playevening”：1}}

这就是我想要的。

Answer 1

通常，这就是您从Promise中返回响应正文的方式。

fetch(`${baseUrl}/api/user/${user}?password=${password}`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }})
  .then(response => response.json())
  .then‌(data=> { 
    console.log(data); 
  })

Answer 2

尝试通过这种方式解析响应：

fetch('/api/user/'+ user + '?password=' + password, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }}).then(async (res) => {
    const raw = await res.text();
    const parsed = raw ? JSON.parse(raw) : { success: res.ok };

    console.log(parsed);
  })

在这种情况下，您还可以添加一些响应状态检查（当然，如果需要的话）以及解析结果JSON。

Answer 3

要从响应中获取JSON正文内容，您需要使用json（）

fetch('/api/user/'+ user + '?password=' + password, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }}).then((res) => {
                const jsonData = res.json();
                console.log(jsonData);
              })

如何从API调用获取响应JSON

3 个答案: