在 ReactJS 中渲染已解决或拒绝的 Promise 值

Question

所以，我有这个函数 fetchData() 返回一个被拒绝或解决的承诺。 如果 promise 解决了，我该如何在页面上呈现它？

function Fetchdata() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.5) {
                resolve(`resolved`);
            } else {
                reject(new Error("err"));
            }
        }, time);
    });
}

Answer 1

• 为每个请求状态提供一些初始状态
• 使用 promise-chain 或 async/wait 和 try/catch
• 更新渲染功能

使用承诺链的力量。

class App extends React.Component {
   state = {
     data: null,
     error: null,
     loading: true;
   };

   componentDidMount() {
      fetchData()
        .then(data => {
          // promise resolved
          // handle happy path, update state.data
        })
        .catch(err => {
          // promise rejected
          // handle sad path, update state.error
        })
        .finally(() => {
          // promise is settled
          // set loading false
        });
   }
     
   render() {
      const { data, error, loading } = this.state;

      if (loading) {
        <div>Loading...<.div>;
      }

      return (
          <div>
              <h1></h1>
              {error && <div>Error</div>}
              {data && <div>{data}</div>
          </div>
      );
  }
}

以类似的方式在 try/catch/finally 中使用 async/await

async componentDidMount() {
  try {
    const data = await fetchData();
    // promise resolved
    // handle happy path, update state.data
  } catch(err) {
    // promise rejected
    // handle sad path, update state.error
  } finally {
    // promise is settled
    // set loading false
  }
}