API 가져 오기를 동적으로 만들고 체인하는 방법은 무엇입니까?

Question

사용자가 양식을 제출 한 후 이미지 배열에 액세스 할 수 있으며 업로드 한 모든 사진을 클라우드 서버에 저장하려면 백엔드로 전화해야합니다.

/upload api 끝점은 한 번에 하나의 이미지를 사용합니다. 이 배열의 각 이미지에 대한 API 호출을 만들고 차례대로 연쇄 적으로 연결하는 방법은 무엇입니까? 나는 어떻게 든 이것을 할 수있는 reduce을 사용할 수 있다고 생각했지만, 100 % 확실하지는 않습니다. 나는 하나의 이미지 업로드에 대한 API 호출을 만들고 있어요 방법은 다음과

는 다음과 같습니다

const api = "https://appName.herokuapp.com/upload"; 
    const uri = photos[0]; 
    const formData = new FormData(); 

    formData.append('image', { 
     uri, 
     name: `photo.jpg`, 
     type: `image/jpg`, 
    }); 

    const options = { 
     method: 'POST', 
     body: formData, 
     headers: { 
     Authorization:`Basic ${base64.encode(BACKEND_AUTHENTICATION_HEADER)}`, 
     Accept: 'application/json', 
     'Content-Type': 'multipart/form-data', 
     }, 
    }; 

    fetch(api, options) 
     .catch((e) => console.log(e)) 
     .then((response) => { 
     console.log(response); 
     }) 

Answer 1

Promise.All을 사용하면 여러 API 호출을 시작하고 모든 호출이 해결 될 때까지 기다려야합니다. Promise.all에 대해 then()에 전달 된 함수는 결과를 포함하는 배열을받습니다. 예를 들어 :

Promise.all([/*Array of promises*/]).then(function(results){ 
    //Results is an array 
}).catch(function(error){ 
    //Handle errors 
} 

는 여기 jsFiddle입니다 : http://jsbin.com/yuqabizado/2/edit?html,js,output

편집 : - Promise.all과의 호환성 문제에 대한 댓글이 삭제되었습니다. 그 점을 지적 해 주신 고맙습니다.

Answer 2

당신은 같은 것을 할 수 redux를 사용하는 경우 :로 이미지의 배열을 만들기

• 을 업로드 됨
• 색인을 매개 변수로 사용하여 다음 색인을 모두 재귀 적으로 호출하는 작업을 생성하십시오.
• Whe N 인덱스 0에 액션 패스를 호출하고 작업이 반복적으로

로직이 뒤에 그 시점에서 모든 이미지를 업로드 할 수 있습니다

imagesArray: [ image1, image2, image3 ]; // each image is an object

같은 액션 호출 :

store.dispatch(Actions.recursivelyUploadImages(0, imagesArray)); 
// If your action is defined outside of your current scope 
// you can either bind it or pass in the imagesArray 

을 그러면 당신의 행동은 다음과 같이 정의 될 것입니다 :

recursivelyUploadImages(index, array) { 
    // construct/define your api/options here 
    fetch(api, options) 
     .catch((e) => console.log(e)) 
     .then((response) => { 
     console.log(response); 
     if (index < array.length - 1) { 
      // call recursiveUploadImages(index+1, array); 
     } 
     }) 
} 

이것이 좋은 해결책이라면 지금은 안됩니다. 반응과 redux에 대한 지식은 매우 제한되어 있으며, 현재의 경험으로는 이런 종류의 해결책에 대해서만 생각할 수 있습니다.