在反应组件中使用异步等待
Using Async await in react component
所以我创建了一个组件,它使用我提供的 props 发出 post 请求。
尽管我熟悉 Async await,但出于某种原因,我似乎无法将其变为 return 已履行承诺的实际价值,而只是等待处理。
我已经尝试用更多函数包装,因为我知道承诺没有得到解决。
我觉得我错过了什么。
下面是我的代码示例
export default class PostController extends React.Component {
constructor(props) {
super(props)
}
Wrapper = (body) => {
try{
let x = this.Send(body);
return x;
console.log(x)
}catch(e){console.log(e)}
}
Send = async (body) => {
try{
let data = await this.Post(body);
return data;
}catch(e){console.warn(e)}
}
Post = async (body) => {
try{
const options = {
method: 'POST',
uri: 'XXXXXXXXXXXXXXXXXXXX',
body: body
}
const data = await rp(options);
return data;
}catch(e){console.warn(e)}
}
render(props) {
let jsonBody = JSON.stringify(this.props.data)
const returnData = this.Wrapper(jsonBody)
console.log(returnData)
return(
<div>
{(!this.props.data.pw) ? 'Retrieved Password: ' + returnData.message : 'Generated PassWord!:' + returnData.message }
</div>
)
}
}
我相信您应该尝试将 Wrapper 函数标记为异步并在控制台记录 returnData 之前等待它。也等待 Wrapper 内的 Send()。
我想你需要更多关于 JS 的 async/await
。
一个async function
总是return一个承诺。
所以 Wrapper
中的 x
是一个承诺。因为你不使用 await/async
.
应该是这样的
async Wrapper = (body) => {
try{
let x = await this.Send(body); // <-- missing await here
return x;
}catch(e){console.log(e)}
}
但是,render
中的代码不起作用。因为 this.Wrapper()
现在 return 是一个承诺。 -> returnData is a promise
。而且 render
方法不能是异步函数 :)
render(props) {
//...
const returnData = this.Wrapper(jsonBody) // <-- returnData here is a promise.
//...
所以要让事情正常进行。
你必须使用 state
。在componentDidMount
或componentDidUpdate
中调用this.Wrapper
。例如:
constructor() {
// ...
this.state = { returnData: null }
}
async componentDidMount() {
const returnData = await this.Post(...); // Using await to get the result of async func
this.setState({ returnData });
}
async Post(body) {
try{
const options = {
method: 'POST',
uri: 'XXXXXXXXXXXXXXXXXXXX',
body: body
}
return rp(options); // define await then return is unnecessary
}catch(e){console.warn(e)}
}
render() {
const { returnData } = this.state;
// ... Do the rest
}
所以我创建了一个组件,它使用我提供的 props 发出 post 请求。
尽管我熟悉 Async await,但出于某种原因,我似乎无法将其变为 return 已履行承诺的实际价值,而只是等待处理。
我已经尝试用更多函数包装,因为我知道承诺没有得到解决。
我觉得我错过了什么。
下面是我的代码示例
export default class PostController extends React.Component {
constructor(props) {
super(props)
}
Wrapper = (body) => {
try{
let x = this.Send(body);
return x;
console.log(x)
}catch(e){console.log(e)}
}
Send = async (body) => {
try{
let data = await this.Post(body);
return data;
}catch(e){console.warn(e)}
}
Post = async (body) => {
try{
const options = {
method: 'POST',
uri: 'XXXXXXXXXXXXXXXXXXXX',
body: body
}
const data = await rp(options);
return data;
}catch(e){console.warn(e)}
}
render(props) {
let jsonBody = JSON.stringify(this.props.data)
const returnData = this.Wrapper(jsonBody)
console.log(returnData)
return(
<div>
{(!this.props.data.pw) ? 'Retrieved Password: ' + returnData.message : 'Generated PassWord!:' + returnData.message }
</div>
)
}
}
我相信您应该尝试将 Wrapper 函数标记为异步并在控制台记录 returnData 之前等待它。也等待 Wrapper 内的 Send()。
我想你需要更多关于 JS 的 async/await
。
一个async function
总是return一个承诺。
所以 Wrapper
中的 x
是一个承诺。因为你不使用 await/async
.
应该是这样的
async Wrapper = (body) => {
try{
let x = await this.Send(body); // <-- missing await here
return x;
}catch(e){console.log(e)}
}
但是,render
中的代码不起作用。因为 this.Wrapper()
现在 return 是一个承诺。 -> returnData is a promise
。而且 render
方法不能是异步函数 :)
render(props) {
//...
const returnData = this.Wrapper(jsonBody) // <-- returnData here is a promise.
//...
所以要让事情正常进行。
你必须使用 state
。在componentDidMount
或componentDidUpdate
中调用this.Wrapper
。例如:
constructor() {
// ...
this.state = { returnData: null }
}
async componentDidMount() {
const returnData = await this.Post(...); // Using await to get the result of async func
this.setState({ returnData });
}
async Post(body) {
try{
const options = {
method: 'POST',
uri: 'XXXXXXXXXXXXXXXXXXXX',
body: body
}
return rp(options); // define await then return is unnecessary
}catch(e){console.warn(e)}
}
render() {
const { returnData } = this.state;
// ... Do the rest
}