Vue에서 두 비동기 작업 간의 종속성

Vue에서 두 비동기 작업 간의 종속성

내 집vue에는 두 가지 비동기 작업이 필요합니다.

created() {
  this.$store.dispatch('GET_LATEST_POLL');
  this.$store.dispatch('INIT_STREAM');
},

Vuex의 실장은 다음과 같습니다.

GET_LATEST_POLL: async (context) => {
  const pollData = await axios.get(`${BFF_ENDPOINT}/polls/last`, getAuthHeader(context));
  const item = pollData.data.data;
  context.commit('SET_LATEST_POLL', item);
},

INIT_STREAM: async (context) => {
  const streamData = await axios.get(`${API_ENDPOINT}/polls/?obd=date`, getAuthHeader(context));
  const items = streamData.data.data;
  items.filter(item => item._id !== context.state.latestPoll._id);
  context.commit('SET_STREAM', items);
},

INIT_STREAM과 LATTE_POLL의 관계가 있음을 알게 되었습니다.context.state.latestPoll양쪽의 액션을 시리얼화하고 싶지 않습니다.둘 다 백엔드의 paraly와 통신하고 싶습니다.하지만 LATTE_POLL 결과를 기다리려면 INIT_STREAM이 필요합니다.

어떻게 하면 좋을까요?두 가지 약속을 실행하는 단일 액션에 논리를 결합해야 합니까?await Promise.all([latestPoll, items])이 방법이 올바른 접근 방식입니까?

컴포넌트에서1개의 액션을 디스패치 하는 것을 추천합니다.이것에 의해, 다른 2개의 액션이 디스패치 됩니다.

LatestPollAndStreamAction: async (context) => {
    let pollDataRequest = axios.get(...);
    let streamDataRequest = axios.get(...);
    Promise.all(pollDataRequest , streamDataRequest).then(([latestPoll, items]) => {
        const pollItem = latestPoll.data.data;
        context.commit('SET_LATEST_POLL', pollItem);
        //logic for the other commit
        const streamItems = streamData.data.data;
        streamItems.filter(item => item._id !== context.state.latestPoll._id);
        context.commit('SET_STREAM', streamItems);
    })
}

이것에 의해, 양쪽의 요구가 동시에 기동해, 양쪽의 사용 결과가 나오면, 원하는 순서로 커밋을 실행할 수 있습니다.

PS: 코드는 테스트되지 않았지만 원하는 접근법의 요지를 제공하는 것 뿐입니다.

제가 질문을 해석했을 때, 당신은 두 가지 행동을 합친 세 번째 행동을 제안하고 있었습니다.그 방법으로는 괜찮을 것 같습니다만, INIT_STREAM을 조정하여 병렬로 콜을 발신할 수도 있다고 생각합니다.다음 사항이 필요합니다.

1. GET_LATEST_POLL이 약속을 반환하는지 확인합니다.
2. INIT_STREAM에서 GET_LATEST_POLL로 액션을 디스패치합니다만, 그렇지 않습니다.await결과 - 반환값을 다음과 같이 저장합니다.const getLatestPollPromise.
3. 공리적으로 요구하다const streamData = await axios.get...그러나 다시, 대기에서 대기로 변경하십시오.const streamDataPromise = axios.get...
4. 사용하다await Promise.all([getLatestPollPromise, streamDataPromise])질문에서 제안하신 것처럼요

INIT_STREAM이 항상 최신 Poll을 필요로 하는 경우, 제3의 액션은 리크가 있는 추상화로 간주되어 다른 개발자에게 혼란을 줄 수 있기 때문에 불필요하다고 생각합니다.

언급URL : https://stackoverflow.com/questions/61066276/dependency-between-two-async-actions-in-vue