Что React делает в componentDidMount для асинхронного запроса? - PullRequest
Новая
       24

Что React делает в componentDidMount для асинхронного запроса?

0 голосов
/ 22 мая 2019

Знание, которое я знал, что setTimout позже, чем Promise Так что я хочу доказать, что это правда.

Я установил элемент setTimeout в script и запросил в React.componentDidMount использование axios с async await грамматическим сахаром.Но результат setTimtout был console до didMount. Я не знаю, почему это так. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>order?</title>
</head>

<body>
  <div id="app"></div>
  <div>
    <h2>order list</h2>
    <ol id="ol">

    </ol>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  <!--        <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.production.min.js"></script>-->
  <!--        <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.production.min.js"></script>-->
  <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/15.4.2/react-dom.min.js"></script>

  <script>
    window.olElement = document.getElementById('ol');

    function createElement(text) {
      const element = document.createElement('li')
      element.innerText = text;
      return element;
    }

    async function getData() {
      await axios('https://www.apiopen.top/weatherApi?city=%E5%8C%97%E4%BA%AC').then(() => {
        olElement.appendChild(createElement("axios then in script element"))
      });
      olElement.appendChild(createElement("await res in script element"))
    }

    setTimeout(() => {
      olElement.appendChild(createElement("setTimeout in script element"))
    });

    getData();
  </script>

  <script>
    function _instanceof(left, right) {
      if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
        return right[Symbol.hasInstance](left);
      } else {
        return left instanceof right;
      }
    }

    function _typeof(obj) {
      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
        _typeof = function _typeof(obj) {
          return typeof obj;
        };
      } else {
        _typeof = function _typeof(obj) {
          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
        };
      }
      return _typeof(obj);
    }

    function _classCallCheck(instance, Constructor) {
      if (!_instanceof(instance, Constructor)) {
        throw new TypeError("Cannot call a class as a function");
      }
    }

    function _defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    function _createClass(Constructor, protoProps, staticProps) {
      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
      if (staticProps) _defineProperties(Constructor, staticProps);
      return Constructor;
    }

    function _possibleConstructorReturn(self, call) {
      if (call && (_typeof(call) === "object" || typeof call === "function")) {
        return call;
      }
      return _assertThisInitialized(self);
    }

    function _assertThisInitialized(self) {
      if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
      }
      return self;
    }

    function _getPrototypeOf(o) {
      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
      };
      return _getPrototypeOf(o);
    }

    function _inherits(subClass, superClass) {
      if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function");
      }
      subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
          value: subClass,
          writable: true,
          configurable: true
        }
      });
      if (superClass) _setPrototypeOf(subClass, superClass);
    }

    function _setPrototypeOf(o, p) {
      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
      };
      return _setPrototypeOf(o, p);
    }

    var A =
      /*#__PURE__*/
      function(_React$Component) {
        _inherits(A, _React$Component);

        function A() {
          _classCallCheck(this, A);

          return _possibleConstructorReturn(this, _getPrototypeOf(A).apply(this, arguments));
        }

        _createClass(A, [{
          key: "componentDidMount",
          value: async function componentDidMount() {
            olElement.appendChild(createElement("react componentDidMount"))
            var res = await axios('https://www.apiopen.top/weatherApi?city=%E5%8C%97%E4%BA%AC').then(res => {
              olElement.appendChild(createElement("axios then in react didMount"))
              return res
            });
            olElement.appendChild(createElement("await res in react didMount"))
          }
        }, {
          key: "render",
          value: function render() {
            return React.createElement("div", null, "A");
          }
        }]);

        return A;
      }(React.Component);

    ReactDOM.render(React.createElement(A, null), document.getElementById('app'));
  </script>


</body>

</html>

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Ваш контрольный пример не имеет отношения к тому, что вы хотите проверить. Используя axios, вы фактически помещаете HTTP-запрос в Promise, и время разрешения Promise теперь зависит от того, когда запрос будет выполнен.

Для объективного теста используйте ту же функцию внутри Promise и setTimeout, как этот вопрос.

0 голосов
/ 22 мая 2019

Смущает, что setTimeout выполняется позже, чем обещание, так как они оба асинхронны и будут ждать столько времени, сколько им нужно, пока их задача не будет завершена.

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

Axios отправляет HTTP-запрос на открытие.Обещание будет выполнено только после того, как запрос будет выполнен, что займет некоторое время, скажем, около 500 мс или около того (вы можете проверить, сколько времени в сетевой панели инструментов разработчика).Ваш другой код будет продолжать выполняться, включая событие setTimeout, до тех пор, пока не завершится http-запрос.

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

MDN обладает большими ресурсами на с использованием Promises .Если вам интересно понять, почему setTimeout без задержки запускается позже, взгляните на модель параллелизма и цикл обработки событий

...