Использование Async await в реагирующем компоненте - PullRequest
Новая
       13

Использование Async await в реагирующем компоненте

0 голосов
/ 01 марта 2019

Итак, я создал компонент, который снимает почтовые запросы с предоставленными мною реквизитами.

Хотя я знаком с Async, ожидаю, но по какой-то причине не могу получить это, чтобы вернуть фактическийзначение выполненного обещания и вместо этого просто ожидающий.

Я попытался обернуть большим количеством функций, поскольку я понимаю, что обещание не выполняется.

Я чувствую, что что-то упустил.

Пример моего кода ниже 

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>
        )
    }

}

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Я думаю, вам нужно больше о async/await в JS.

An async function всегда возвращает обещание.Так что x в Wrapper - это обещание.Поскольку вы не используете 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() теперь возвращает обещание.-> returnData is a promise.И метод render не может быть асинхронной функцией :) 

render(props) {
    //... 
    const returnData = this.Wrapper(jsonBody) // <-- returnData here is a promise.
    //...

Таким образом, чтобы все заработало.

Вы должны использовать state.Позвоните на номер this.Wrapper в componentDidMount или componentDidUpdate.Например: 

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

}
0 голосов
/ 01 марта 2019

Полагаю, вам следует попробовать пометить функцию Wrapper как асинхронную и ожидать ее перед регистрацией в консоли returnData.Также ожидайте отправки () внутри Wrapper.

...