Await

import { Await } from 'flowr';

Await will render it's children when and only if the provided promise resolves. When used with a render prop, it will always apply the promise result (err, res) to the callback.


  
    Hello, world!
  



// resolved:

  Hello, world!


// rejected:

Await can also be used with a render prop. The render callback will take two arguments: error and response.


  
    {(err, res) => (
      
        {res.data.map(item => {item}
)}
        
          Sorry, we cannot fetch the results right now. Try again later
        
      
    )}

You can also provide a Promise returning function to keep things lazy and only evaluate the promise when the component is constructed.

// ...

render() {
  const { shouldFetch, url } = this.props

  return (
    
       fetch(url)}>
        {
          (err, res) => (
            
              JSON.stringify(res.data)
            
          )
        }
      
    
  )
}

If you are providing a function, a new promise will be returned everytime you are adding/removing the element to/from the DOM. This will initiate a new request each time. There are ways around this, like keeping track of the promise in the parent component and pass that if it's defined. You can get a reference to the promise through the onPromise callback prop.

// ...

promise = null

toggleFriends = (e) => {
  this.setState({
    showFriends: e.target.checked
  })
}

render() {
  const { showFriends } = this.state
  const { url } = this.state

  return (
    
      
      
         fetch(url)}
          onPromise={(promise) => (this.promise = promise)}>
            {
              (err, res) => (
                // display list of friends, or not...
              )
            }
        
      
    
  )
}

If you don't specify a valid for prop, everything will shortcircuit and the children will be rendered immediately, as there is nothing to "wait for".

Props

Name	Type	Default	Description
for	oneOfType([ instanceOf(Promise), func ])	-	The promise we need to wait for, or a function that will return one which will be evaluated lazily, in the component's `constructor`
tap	func	-	Takes an `error` and a `response` argument and is called when the promise is fulfilled. Use this to perform side-effects or just for debugging purposes.
onPromise	func	-	Takes a single argument that will be the promise returned from the function passed through the `for` prop. Useful for keeping track of the first promise. Will not be called if we already pass a Promise to the `for` prop.

Contribute on Github! Edit this section.