React.js How to call Axios sequentially?

Question

  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);
      });
  }, []);

The useEffect () function in my function components is shown below.

Below is a total of three asynchronous communication.

The problem is that those asynchronous communications don't go through the same order each time.

How do you proceed with asynchronous communication as shown in the code?

Jayant Joseph · Accepted Answer · 2020-01-02 11:05:55Z

3

I believe what you are looking for is Promise chaining. You can use Promise.all(), or simply do it like this. The following example is a way to use promise chaining. You can Google Promise chaining to learn more about it :)

axios.get('1st api call').then(res1 => {
    //some code related to 1st
    return axios.get('2nd api call')
}).then(res2 => {
    //some other code related to 2nd
    return axios.get('3rd api call')
}).then(res3 => {
    //some other code related to 3rd
})

You can remove those seemingly misplaced setTimeouts and new Promise, and try something like this. What the above code is doing is, After the 1st API call is a success, the 2nd one is called, and when the 2nd one is a success, the 3rd API call is called.

Hope what I'm talking about is your problem, and this helps!

edited Jan 2, 2020 at 11:05

answered Jan 2, 2020 at 10:49

Jayant Joseph

729 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2020-01-02 10:06:46Z

2

If you want the outputs strictly ordered as the inputs, You can use p-queue, Promise queue with concurrency control.

  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]);

sandbox

Update your code should be something like this

  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]);

edited Jan 2, 2020 at 10:06

answered Jan 2, 2020 at 7:59

Alex

3,9911 gold badge20 silver badges27 bronze badges

5 Comments

t.niese Over a year ago

Why did you change the timeout values from 600 to different values for each timeout? Is that relevant?

Alex Over a year ago

its a sample, in reality, you don't need to use setTimeout. async operations have a different speed to fulfilled.we use setTimeout to simulate the action.

t.niese Over a year ago

Yes, but the OP uses new Promise and setTimeout in the question. And you keep that (possibly wrong pattern) and changing the timeout values. that implies that those changed timeout values are relevant.

Alex Over a year ago

I 've shown how to use p-queue library,OP should change the code in a proper way, but I believe OP use setTimeout to make sense of the problem.

Alex Over a year ago

@t.niese I've updated the answer, please have a look.

Collectives™ on Stack Overflow

React.js How to call Axios sequentially?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related