javascript - 无法从 aws lambda (java) 读取 json 正文响应。它说可读流

Question

我有一个无服务器系统，我的后端位于 AWS lambda(java) 中，前端位于 React 中。 我正在发送用户输入的名称值，并期望返回 hello {name}。 我使用 fetch api (post) 将用户输入的数据(在本例中为“name”)发送到后端 lambda。 lambda 能够打印它并修改它。它将 jsonnode 响应发送回前端，但在前端，当我 console.log(response) 时，它不会在正文中打印任何内容。

它显示 body:{...}，单击三个点时显示 Object ReadableStream。 正文:可读流 锁定:假

我确实在 -> 网络 -> 响应中看到了更新的值。(通过 chrome 开发工具进行故障排除时)。我如何访问这个值并在前端使用它？

后端代码:

public class DataProcessor {

    LambdaLogger logger;
    ObjectMapper objectMapper;

    public void handler(InputStream inputStream, OutputStream outputStream, Context context) throws IOException {

        this.logger = context.getLogger();
        this.objectMapper = new ObjectMapper();
        logger.log("Beginning data processing");

        // Get our inputs
        JsonNode body = this.extractBody(inputStream);

        logger.log(body.toString());

        String username = body.get("headers").get("X-FORWARDED-USER").toString().replace("\"", "");
        String method = body.get("httpMethod").toString().replace("\"", "");
        String path = body.get("path").toString().replace("\"", "");
        String data = body.get("body").toString().replace("\"", "");
        Boolean isBase64Encoded = body.get("isBase64Encoded").asBoolean();

        if (isBase64Encoded) {
          data = new String(Base64.getDecoder().decode(data), "utf-8");
        }

        logger.log("username: " + username);
        logger.log("method: " + method);
        logger.log("path: " + path);
        logger.log("data: " + data);
        logger.log("isBase64Encoded: " + isBase64Encoded);

        JsonNode responseJson;

        responseJson =  (JsonNode)constructResponse(data);

        logger.log("Response: " + responseJson.toString());

        // Output the response
        OutputStreamWriter writer = new OutputStreamWriter(outputStream, "UTF-8");
        writer.write(responseJson.toString());
        writer.close();
    }

    // construct response
    private ObjectNode constructResponse(String body) throws IOException {
      ObjectNode response = this.objectMapper.createObjectNode();
      response.put("statusCode", 200);
      response.put("isBase64Encoded", true);
      response.put("body", body);
      response.put("headers", this.objectMapper.readTree("{\"Content-Type\":\"application/json\"}"));
      return response;
    }

    // get body from inputStream
    private JsonNode extractBody(InputStream inputStream) throws IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        JsonNode input = objectMapper.readValue(inputStream, JsonNode.class);
        return input;
    }
}

前端UI代码

class MyForm extends React.Component {
  constructor() {
    super();
    this.state={ name: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange = event =>{
    this.setState({ [event.target.name]:event.target.value })
  }

  handleClick = event =>{
    this.setState(state => ({
        isFormOn: !state.isFormOn,
        name: state.name
    }));
  }

  handleSubmit = event =>{
    event.preventDefault();
    console.log("Name : " + this.state.name)

    const url ="abc"

    const data = { name:this.state.name}

    console.log("Data is : ", data)

    fetch(url, {
        method: 'POST',
        body: JSON.stringify(data)
     })
     .then(function(response){
        console.log("Response is : ", response);
        let json = JSON.parse(response);
        console.log("This is json parsed string : ", JSON.stringify(json));
     })
     .then(data => console.log("data is : ", data))
     .catch(error => console.error('Error:', error))

  }

  render(){
    return(
        <div>
            {
                <form onSubmit={this.handleSubmit}>
                    Name : <input type="text" name="name" onChange={this.handleChange} />
                    <input type="submit" value="Submit" />
                </form>
            }
        </div>
    )
  }

}

ReactDOM.render(
  <MyForm />,
  document.getElementById('root')
);

Answer 1

您需要使用 json() 读取并解析响应，它接受一个响应流并将其读取完成:

 fetch(url, {
    method: 'POST',
    body: JSON.stringify(data)
 })
 .then(response => response.json())
 .then(data => console.log("data is : ", data))
 .catch(error => console.error('Error:', error))