API 調用 ReactJS 后渲染

Question

Alexnm展示了您必須提供的非常惡心的架構，以便在服務器響應客戶端之前讓服務器在 API 調用完成之前等待。

他表明，您必須首先將整個應用程序的每個組件記錄在一個單一的、非分層的平面列表中，然后過濾每個組件以查看某個組件是否具有針對每個請求的 API“數據需求”，然后存儲該 API 請求在全局redux對象中的輸出（也很惡心），然后以某種方式將其傳遞回對象，希望它不會與其他請求發生沖突。

這是因為 ReactJS 的“ 生命周期”鈎子實際上根本不是生命周期鈎子，而是“快速且免費”（且有趣） 。

我並不真正關心這些庫、ES[xyz] 語法和奇怪的哲學中的任何一個，但我想做的是在調用 API之后返回一個 http 響應，即

render() {
    // do an API call.
    // return a response.
}

我見過使用 if fetch(xyz).then(() => {})和許多其他彩色括號和函數，我不完全確定參數從哪里進入或從哪里出去，我不能似乎弄清楚如何在上一行代碼完成之前簡單地推遲下一行代碼。 在then(() => {}) ，這在語法上很漂亮，我根本無法以任何方式返回值。 這就是所謂的功能，但我有困難，實現比側副作用其他任何東西，我無法返回任何結果。

有誰知道如何讓render()自己等待 API 調用？

Answer 1

至於哲學——你可能想閱讀更多關於通量模式的內容——這是 Facebook 提出的架構設計原則。 努力是在單頁應用程序或 SPA 中處理全局狀態。

根據您當前的語法問題 - 您可以使用帶有箭頭函數的承諾。 ES6 中引入了 Promise 作為處理異步請求的解決方案。

使用您的示例fetch(xyz).then(() => {})可以通過以下方式同步執行請求：

render() {
   Promise.resolve(fetch(xyz))
   .then((response) => {
      // Do something with this response - for example..
      if (response.data) {
         axios.get("http://google.com")
         .then((response) => {

         console.log(response.data);

         })
         .catch((err) => {

         // Do something with this error
         console.log(err);
         })
      }
   })
})

return (
    <div>

    </div>
)
}

我不會涉及時間復雜性 - 但上述解決方案將觸發fetch(xyz)請求，然后一旦該請求完成 - 我們就會觸發下一個請求。 這稱為承諾鏈 - 可以在此處找到更多信息： https : //javascript.info/promise-chaining

如果您的目標是在組件渲染或安裝后簡單地進行調用並使用數據，您可以做一些更簡潔的操作並做出友好的反應（非阻塞），如下例所示：

import React, {Component} from 'react';

class Example extends Component {
constructor(props) {
    super(props);

    this.state = {
      data: ''
    };
}

componentDidMount() {
   Promise.resolve(fetch(xyc))
   .then((response.data) => {
       this.setState({
         data:response.data
    });
   })
};

render() {
  const data = this.state

  return (
    {data} 
  )
}