如何从 API 调用中获取响应 JSON

Question

我想从我正在做的 api 调用中检索 JSON 响应。 例如，我想检索这样的东西：

{"error":{},"success":true,"data":{"user":"tom","password":"123","skill":"beginner","year":2019,"月":"三月","日":31,"playmorning":0,"playafternoon":1,"playevening":1}}

这是我在反应中使用 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) 时，会打印以下内容：

响应 {type: "basic", url: " http://localhost:3000/api/user/tim?password=123 ", 重定向: false, status: 200, ok: true, ...}body: (... )bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: " http://localhost:3000/api/user/tim?password=123 " proto : 响应

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

{"error":{},"success":true,"data":{"user":"tom","password":"123","skill":"beginner","year":2019,"月":"三月","日":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);
              })

Answer 4

尝试这个

fetch(${baseUrl}/api/user/${user}?password=${password},{
        method:'GET', 
        headers: {
        'Accept': 'application/json',
        'Content-Type': 
        'application/json',
        }}) .then(async(response ) => { 
             await response.json()
             })