react-async - npm (npmjs.com)

啥东西？咋用？

Async 组件

直接看例子：

// 注意这里
const loadUsers = () =>
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

function App() {
  return (
    <div className="container">
      <Async promiseFn={loadUsers}> // 注意这里
        {({ data, err, isLoading }) => {
          if (isLoading) return "Loading..."
          if (err) return `Something went wrong: ${err.message}`

          if (data)
            return (
              <div>
                <div>
          <h2>React Async - Random Users</h2>
                </div>
                {data.map(user=> (
                  <div key={user.username} className="row">
                    <div className="col-md-12">
              <p>{user.name}</p>
              <p>{user.email}</p>
                    </div>
                  </div>
                ))}
              </div>
            )
        }}
      </Async>
    </div>
  );
}

export default App;

注意到组件参数 promiseFn 传入一个期值函数。提供三个 props：data, err, isLoading。从而简化了我们的期值处理。

useAsync

上面的用法也可写成：

function App() {
  const { data, error, isLoading } = useAsync({ promiseFn: loadUsers })
  if (isLoading) return "Loading..."
  if (error) return `Something went wrong: ${error.message}`
  if (data)

这样，我们可以先加上自己的行为，然后再渲染。

Async.XXX 工具组件

直接看代码：

// Our App component
function App() {
  return (
    <div className="container">
      <Async promiseFn={loadUsers}>
          <Async.Loading>Loading...</Async.Loading> // 注意
          <Async.Fulfilled>  // 注意
            {data => {
              return (
                <div>
                  <div>
            <h2>React Async - Random Users</h2>
                  </div>
                  {data.map(user=> (
                    <div key={user.username} className="row">
                      <div className="col-md-12">
                <p>{user.name}</p>
                <p>{user.email}</p>
                      </div>
                    </div>
                  ))}
                </div>
              )
            }}
          </Async.Fulfilled>  // 注意
          <Async.Rejected>  // 注意
            {error => `Something went wrong: ${error.message}`}
          </Async.Rejected>
      </Async>
    </div>
  );
}

其实就是条件渲染工具。