JavaScript에서 함수를 전달하는 모범 사례

Question

요청에서 데이터를 수신하고 표시하기 전에 수신 한 원시 콘텐츠를 add/format/generate/order처럼 처리하려고합니다.

여기

내가 데이터를 수신하는 방식, 그리고 내가 processData 기능

this.httpService.get(`this/is/my/url`, body).then((data) => { 
    this.processData(data).then((result) => { 
     this.data = result; 
    }, (error) => { 
     this.error = error; 
    }); 
}, (error) => { 
    this.error = error; 
}); 

참고로 전송하는 방법 processData 기능은 약속 함수를 호출해야 할 수도 있습니다.
는 내가 processData 기능을 쓸 수있는 두 가지 방법을 참조하십시오

첫 번째 방법

function processData(data) { 
    return new Promise((resolve, reject) => { 
     step1(); 

     function step1() { 
      this.myService.yolo(data).then({ 
       //... 
       step2(); 
      }, (error) => { 
       reject(error); 
      }); 
     } 

     function step2() { 
      this.myService.foo(data).then({ 
       //... 
       step3(); 
      }, (error) => { 
       reject(error); 
      }); 
     } 

     function step3() { 
      this.myService.bar(data).then({ 
       //... 
       step4(); 
      }, (error) => { 
       reject(error); 
      }); 
     } 

     function step4() { 
      //... 
      resolve(data); 
     } 
    }); 
} 

두 번째 방법을

두 번째 방법은 좀 더 논리적 인 느낌

function processData(data) { 
    step1().then((result) => { 
     step2().then((result) => { 
      step3().then((result) => { 
       step4(); 
       return data; 
      }, (error) => { 
       reject(error); 
      }); 
     }, (error) => { 
      reject(error); 
     }); 
    }, (error) => { 
     reject(error); 
    }); 

    function step1() { 
     //... 
    } 

    function step2() { 
     //... 
    } 

    function step3() { 
     //... 
    } 

    function step4() { 
     //... 
    } 
} 

, 당신 때문에 돈 무슨 일이 일어나는지 이해하려면 step 함수 내용을 볼 필요가 있지만 표기법을 찾으십시오. 너무 혼란스러워!
10 단계에서 읽을 수 없습니다.

그래서 나는 그 일을하는 좋은 방법이 무엇인지 궁금합니다.

Answer 1

당신이 약속을 사용하는 방법에서 누락 된 중요한 것은 당신이 당신이 유용한 방법으로 함께 약속을 체인 방법 당신의 then 콜백에서 무엇을 반환하지 않을 것입니다.

귀하의 processData는 다음과 같이 할 수있는 단계는 다음과 같이

function processData(data) { 
    step1().then(step2).then(step3).then(step4); 

    function step1() { 
     //... 
    } 

    // ... 
} 

을 ... :

가 복잡 아니라면 것을 물론, 의미

function step1() { 
    return this.myService.yolo(data).then(result => { 
     return transformedResult; 
    }); 
} 

... , 당신은 그 (것)들을 그들의 자신의 기능으로 끊을 필요가없는 다 :

function processData(data) { 
    return this.myService.yolo(data) 
     .then(result => { 
      return /*...`result` transformed in some way...*/; 
     }) 
     .then(result => anotherAsyncCall(result)) 
     .then(result => { 
      return /*...`result` transformed again... */; 
     }) 
     .then(result => anotherAsyncCall(result)) // If no transformation needed when passing it on 
     .then(/*etc.*/); 
} 

이것은 각 ca ~ then는 약속을 반환합니다. 약속은 then 콜백에서 반환 한 값으로 해결되거나 약속을 반환하면 해당 약속의 해결/거부를 ​​기준으로 해결되거나 거부됩니다.