Vue.js 서버에 대한 요구 체인

Vue.js 서버에 대한 요구 체인

다른 API 엔드포인트에 비동기 콜을 2회 발신해야 한다고 합니다.두 번째 콜의 쿼리 파라미터는 첫 번째 콜에서 수신한 파라미터에 따라 달라집니다.

개요:

• 첫 번째 엔드포인트는 특정 순서로 몇 가지 ID를 제공합니다(예: 등급에 따라 정렬됨).

• 두 번째 엔드포인트는 이러한 ID에 대한 몇 가지 "메타 정보"를 제공합니다.

엔드포인트 예:

GET/엔드포인트/1

응답 형식:

[
  {
    id: 1,
    rating: 0.67
  },
  {
    id: 2,
    rating: 0.51
  },
  {
    id: 3,
    rating: 0.45
  },
  ...
]

GET/엔드포인트/2?id=1,2

// I receive those ids from call to the first endpoint

응답 형식:

[
  {
    id: 1,
    gender: "male",
    age: 20,
    profession: "Programmer"
  },
  {
    id: 2,
    gender: "transgender",
    age: 27,
    profession: "ML Engineer"
  }
]

그 후 가지고 있는 모든 ID를 루프하여 템플릿에 메타 정보를 표시해야 하는데 순서는 엔드포인트/1의 응답과 같아야 합니다.

이러한 요구를 충족시키는 열쇠가 되는, 즉 다음과 같은 것을 정리하기로 했습니다.

const storage = {
  1: {
    gender: "male",
    age: 20,
    profession: "programmer"
  }
}

또한 첫 번째 엔드 포인트에서 온 사람들과의 변수도 있다.

const persons = [
  {
    id: 1,
    rating: 0.67
  },
  ...
]

내 템플릿에서 나는 smth를 할 수 있었다.

<p v-for="p in persons">{{ storage[p.id].gender }}</p>

문제는 어떤 함수를 호출한 후 모든 데이터를 사용할 수 있도록 요청을 어떻게 체인화하면 요청을 시작할 수 있느냐는 것입니다.

*두 번째 엔드포인트에 문의할 수 있는 것은 2개의 ID뿐이므로 가지고 있는 ID 목록을 루프하여 각 ID에 대해 개별 콜을 발신해야 합니다.실제 앱에서는 첫 번째 엔드포인트에서 100개까지의 ID가 있기 때문에 두 번째 엔드포인트에서 50개까지의 콜이 필요합니다.

다음은 예를 제시하겠습니다.https://jsfiddle.net/lucaskatayama/qxyn1rp1/3/

사실 그것은 VueJS 문제가 아닙니다.이는 Javascript에서 Promise, 즉 Callbacks, u Async/Awit에 의해 해결된 비동기 문제입니다.

이 예에서는 Promise를 사용하여 해결했습니다.

여기서 타임아웃 생성 및 약속 반환 요청을 시뮬레이션합니다. Axios같은 일을 하다

Promise가 해결되면 다음을 사용하여 체인할 수 있습니다..then두 번째 요청을 호출하는 다른 함수를 전달하고, 그 다음, 그 다음, 그 다음.

내부then반환된 데이터를 기반으로 다른 요청을 작성하거나 다른 목록을 요청하거나 원하는 대로 응답을 사용할 수 있습니다.

많은 요청을 처리하기 위해 1회당 요청 수를 제한하기 위해 비동기 라이브러리를 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/46816628/chain-requests-to-the-server-in-vue-js