【发布时间】:2020-02-25 06:37:03
【问题描述】:
我有一个无服务器系统,我的后端在 AWS lambda(java) 中,而前端在反应中。 我正在发送用户输入的名称值,并期望得到一个 hello {name} 作为回报。 在这种情况下,我使用 fetch api (post) 将用户输入的数据“名称”发送到后端 lambda。 lambda 能够打印和修改它。它将 jsonnode 响应发送回前端,但在前端,当我使用 console.log(response) 时,它不会在正文中打印任何内容。
它显示 body:{...} 并单击三个点时显示 Object ReadableStream。 正文:可读流 锁定:假
我确实在 -> Network->Response 中看到了更新的值。(通过 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;
}
}
前端界面代码
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')
);
【问题讨论】:
-
试试
response.text()?另请参阅 mdn 上的 fetch api 和 ReadableStream。特别是this example。如果您需要 cookie,您可能还想使用 xhr 或 ajax library。 -
非常感谢。 response.text() 工作。我确实必须在 response.text() 之后 JSON.parse(body) 才能获取各个字段。但这行得通。
标签: javascript java reactjs amazon-web-services aws-lambda