React.js Axiosを順番に呼び出す方法は？

debugcn 投稿 Dev

ドアンキム

  useEffect(() => {
    new Promise(resolve => {
      setTimeout(() => {
        resolve();
        /* 신규 로트번호 생성을 위한 다음 auto_increment 가져오기 */
        axios
          .get("http://localhost:8080/api/item/autoId")
          .then(response => {
            var output = response && response.data;
            const newLote = lote;
            newLote.lote = nowDate + "-" + output;
            setLote(newLote);
          })
          .catch(response => {
            console.log(response);
          });
      }, 600);
    }),
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          //재고조회 (로트번호 검색기능)
          axios
            .get("http://localhost:8080/api/item/1")
            .then(response => {
              var output = response && response.data;

              const newLookup = Object.assign({}, lookup);

              for (var i = 0; i < output.list.length; i++) {
                var value = output.list[i].lote_id;
                newLookup.lookup[value] = value;
              }

              newLookup.lookup[lote.lote] = lote.lote;
              setLookup(newLookup);
              console.log(lookup.lookup);

              const newState = Object.assign({}, state);
              newState.columns[1].lookup = lookup.lookup;
              setState(newState);
            })
            .catch(response => {
              console.log(response);
            });
        }, 600);
      }),
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          /* 출고 이력 불러오기 */
          axios
            .get("http://localhost:8080/api/shipping/history/1")
            .then(response => {
              var output = response && response.data;

              const newState = Object.assign({}, state);
              newState.data = output.list;
              setState(newState);
            })
            .catch(response => {
              console.log(response);
            });
        }, 600);
      });
  }, []);

関数コンポーネントのuseEffect（）関数を以下に示します。

以下は、合計3つの非同期通信です。

問題は、これらの非同期通信が毎回同じ順序で実行されないことです。

コードに示されているように、非同期通信をどのように進めますか？

アレックス

出力を入力として厳密に順序付けする場合は、同時実行制御を備えたp-queue、Promiseキューを使用できます。

  useEffect(() => {
    const myPromises = [
      () =>
        new Promise(resolve =>
          setTimeout(() => {
            resolve();
            console.log("First(slow)");
          }, 5000)
        ),
      () =>
        new Promise(resolve =>
          setTimeout(() => {
            resolve();
            console.log("Second(fast)");
          }, 100)
        ),
      () =>
        new Promise(resolve =>
          setTimeout(() => {
            resolve();
            console.log("Third(slower)");
          }, 10000)
        )
    ];

    queue.addAll(myPromises);
  }, [queue]);

サンドボックス

コードを更新するには、次のようにします。

  useEffect(() => {
    const myPromises = [
      () =>
        axios
          .get("http://localhost:8080/api/item/autoId")
          .then(x => console.log(x)),

      () =>
        axios
          .get("http://localhost:8080/api/item/1")
          .then(x => console.log(x)),

      () =>
        axios
          .get("http://localhost:8080/api/shipping/history/1")
          .then(x => console.log(x))
    ];

    queue.addAll(myPromises);
  }, [queue]);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]