Axios: 여러 API 요청 연결

Axios: 여러 API 요청 연결

Google Maps API에서 몇 가지 API 요청을 체인으로 만들어야 하는데, Axios에서 하려고 합니다.

componentWillMount()에 있는 첫 번째 요구입니다.

axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
  .then(response => this.setState({ p1Location: response.data }))  }

두 번째 요청은 다음과 같습니다.

axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2)
  .then(response => this.setState({ p2Location: response.data }))

다음으로 세 번째 요구가 있습니다.처음 2개의 요구에 따라 달라집니다.

axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + this.state.p1Location.results.place_id + '&destination=place_id:' + this.state.p2Location.results.place_id + '&key=' + 'API-KEY-HIDDEN')
  .then(response => this.setState({ route: response.data }))

첫 번째 두 번째 두 번째 콜 후에 세 번째 콜이 발생하도록 이 세 가지 콜을 체인하려면 어떻게 해야 합니까?

우선, 이 작업을 하고 싶은지 잘 모르겠습니다.componentWillMount에 넣어 두는 것이 좋습니다.componentDidMount이러한 요구에 의해 갱신되는 디폴트 상태가 몇 가지 있습니다.둘째, 추가 재렌더가 발생할 수 있으므로 쓰는 setStates의 수를 제한해야 합니다. 다음은 비동기/대기 기능을 사용하는 솔루션입니다.

async componentDidMount() {

  // Make first two requests
  const [firstResponse, secondResponse] = await Promise.all([
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p1}`),
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p2}`)
  ]);

  // Make third request using responses from the first two
  const thirdResponse = await axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + firstResponse.data.results.place_id + '&destination=place_id:' + secondResponse.data.results.place_id + '&key=' + 'API-KEY-HIDDEN');

  // Update state once with all 3 responses
  this.setState({
    p1Location: firstResponse.data,
    p2Location: secondResponse.data,
    route: thirdResponse.data,
  });

}

파티에는 조금 늦었지만, 나는 약속의 사슬을 유지하기 위해 약속을 돌려주는 이런 패턴이 좋다.

axios
  .get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
  .then(response => {
    this.setState({ p1Location: response.data });
    return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2);
  })
  .then(response => {
    this.setState({ p2Location: response.data });
    return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p3);
  })
  .then(response => {
    this.setState({ p3Location: response.data });
  }).catch(error => console.log(error.response));

axios.all 을 사용해 본 적이 있습니까?다음과 같은 것을 사용해 보세요.

axios.all([axios.get(`firstrequest`),
           axios.get(`secondrequest`),
           axios.get(`thirdrequest`)])
     .then(axios.spread((firstResponse, secondResponse, thirdResponse) => {  
         console.log(firstResponse.data,secondResponse.data, thirdResponse.data);
     }))
     .catch(error => console.log(error));

이렇게 하면 얻을 수 있는 모든 것을 얻을 수 있으며 다음과 같이 .data를 사용하여 호출해야 하는 응답에 넣을 수 있습니다.firstResponse.data

퍼포먼스 향상과 깔끔한 코드 실현:

1. promise.all() 또는 axios.all()을 사용하여 request1과 request2를 동시에 실행합니다.따라서 request2는 request1의 응답을 기다리지 않고 실행됩니다.request1 및 request2가 응답을 반환한 후 request3은 반환된 응답 데이터를 파라미터로 하여 실행을 계속합니다.
2. 템플릿 문자열은 백틱을 사용한다.(')

async componentDidMount(){
    try{
        const [request1, request2] = await Promise.all([
           axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p1}`),
           axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p2}`)
        ]);

        const request3 = await axios.get(`https://maps.googleapis.com/maps/api/directions/json?origin=place_id:${request1.data.results.place_id}&destination=place_id:${request2.data.results.place_id}&key=${API-KEY-HIDDEN}`);
        console.log(request3);
    }
    catch(err){
        console.log(err)
    }
}

이런 게 필요할 것 같아요

const firstRequest = axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
      .then(response => this.setState({ p1Location: response.data }))  }

const secondRequest = axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2)
  .then(response => this.setState({ p2Location: response.data }))

const thirdRequest = axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + this.state.p1Location.results.place_id + '&destination=place_id:' + this.state.p2Location.results.place_id + '&key=' + 'API-KEY-HIDDEN')
  .then(response => this.setState({ route: response.data }))


Promise.all([firstRequest, secondRequest])
       .then(() => {
           return thirdRequest
       })

Axios를 사용한 동시 요청의 경우axios.all()플러스axios.spread()

actios.spread()는 모든 데이터를 함수에 전달할 수 있도록 인수 배열을 여러 인수로 분산하기 위해 사용됩니다.

예

const url_1 = '', url_2 = ''; 

axios.all([
  axios.get(url_1), 
  axios.get(url_2)
])
  .then(
     axios.spread((resp1, resp2) => {
       let id_1 = resp1.data.results.place_id
       let id_2 = resp2.data.results.place_id
       let url_3 = ''                          // <---- Build your third URL here
       axios.get(url_3)
         .then((resp3) => {
             // You have all the data available here to useState()
         })
     })
  )
  .catch((error) => console.log(error)) 

이것은 JS의 약속과 관련이 있습니다.여러 가지 방법으로 해결할 수 있습니다.가장 간단한 방법은 각 요청을 첫 번째에서 세 번째 순서로 중첩하는 것입니다.즉, 첫 번째 요청부터 두 번째 요청부터axios.get(url)첫 번째 요청으로.then()그리고 세 번째 요청을 두 번째 요청의 요청에 넣습니다..then().

일반적으로 약속의 경우, 당신은 내면에서 그것을 예상합니다..then()부품 보증은 해결되었으며, 사용자는 이 서비스에 액세스 할 수 있습니다.response이렇게 네스트함으로써 비동기적인 문제를 우아하지 않게 해결할 수 있습니다.

약속의 배열을 만들고 나서 사용을 줄입니다.

/**
 * Runs promises from array of functions that can return promises
 * in chained manner
 *
 * @param {array} arr - promise arr
 * @return {Object} promise object
 */
function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  )
}

// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5)
  })
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2)
  })
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4)
  })
}

const promiseArr = [p1, p2, f3, p4]
runPromiseInSequence(promiseArr, 10)
  .then(console.log)   // 1200

언급URL : https://stackoverflow.com/questions/44182951/axios-chaining-multiple-api-requests