'콜백헬'에 해당하는 글 1건

JavaScript :: callbackhell(콜백헬)

ASP.NET MVC/JavaScript 2017. 1. 7. 20:00

콜백헬 에 대해 포스팅해보려고한다


비동기 프로그래밍을 짜본적이없어서 초반에 코딩을할때 고민을 많이 했다 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  func1 (
    function func2 (
        function func3 (
            function func4 (
                function func5 () {
                alert('func5()');                    
                }
            alert('func4()');    
            }
            alert('func3()');                
        }
        alert('func2()');
    }    
    alert('func1()');    
    
cs



예를 들어보자 개발을 하다보면 이런 콜백 을 자주 볼수있는데 .. 


문제는 돌아간다..돌아가긴하는데...  이걸본 다른 개발자나 인수자들은.....





이럴 경우에는 async 프레임워크 , promise 를 사용하는 방법이있다  저의 경우에는 async 프레임워크를


이용해서 해결했습니다



Waterfall



async 프레임워크에는 여러개 의 제어 흐름이 있는데 자세한것은 https://caolan.github.io/async/  공식 깃헙입니다


저는 waterfall 방식을 이용해서 코드를 깔끔하게 정리했습니다




구현 하려는 코드가 


twitter rest api 를 이용해 데이터를 가져오게되면 한페이지에 100개의 데이터를 가져올수밖에없다 대신에 포함된데이터에 


next_results 값을 포함시켜서 다음 에 찾게되는 값의 주소를 나타낸다.



이값을 이용해 내가원하는 수만큼 가져오고싶엇다 



Waterfall 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
              async.waterfall([
  
                                             
                                            },
                                            function(callback){                                                                                                                                                                                                               
                                                 console.log("next_result 1")
                                                 console.log("scheduleId 1")
                                                functions.ScheduleFeatch(scheduleId);
                                                  setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            },
                                            function(scheduleId,callback){
                                                 console.log("next_result 2")
                                                 console.log("scheduleId 2")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log("scheduleId 3")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                console.log("scheduleId 4")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                console.log("scheduleId 5")
                         
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
 
cs


'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,