FETCH 함수 샘플

퓨즈[Fusetools]의 Fetch 함수 샘플을 만들었습니다. Fetch는 간단히 말해 웹상의 문서를 가져오는 함수입니다.

전체 프로젝트 다운로드: https://github.com/englekk/Fusetools_FetchSample
* Simple 폴더의 내용을 여러개의 파일로 나눈 것이 Advanced 입니다.

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<App>
    <StatusBarBackground />
    <Fuse.iOS.StatusBarConfig Style="Light"/>

    <Font ux:Global="KoreanFont" File="malgun.ttf" />
    <Router ux:Name="router" />

    <JavaScript>
        var print = debug_log;
        var Observable = require("FuseJS/Observable");

        // Daum API key (https://apis.daum.net/search/book)
        var api_key = "";

        // API 키가 없다면 아래 json 사용
        var jsonArr = [
            "https://dl.dropboxusercontent.com/u/1486638/examples/fuse_fetch1.json",
            "https://dl.dropboxusercontent.com/u/1486638/examples/fuse_fetch2.json",
            "https://dl.dropboxusercontent.com/u/1486638/examples/fuse_fetch3.json"
        ];
        var jsonArrCursor = 0;

        var items = Observable();
        var searchText = Observable();
        var selectedItem = Observable();

        // HTML 태그 없애기
        function stripHTML(text)
        {
            text = text.replace(/&lt;/gm, "<");
            text = text.replace(/&gt;/gm, ">");
            return text.replace(/<.*?>/gm, '');
        }

        // 숫자 포맷
        Number.prototype.numberFormat = function(n, x) {
            var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
            return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
        };

        // 검색 시작
        function search()
        {
            items.clear();

            // API 키가 있거나 없는 경우 json 데이터 가져오기
            var _url = 'https://apis.daum.net/search/book?apikey=' + api_key + '&q=' + searchText.value + '&output=json';
            if(api_key == "")
            {
                if(jsonArrCursor > jsonArr.length - 1) jsonArrCursor = 0;
                _url = jsonArr[jsonArrCursor];
                jsonArrCursor++;
            }

            fetch(_url, {
                method: 'GET',
                headers: { "Content-type": "application/json"}
            }).then(function(response) {
                //print("status: " + response.status);
                //print("response_ok: " + response.ok);
                return response.json();
            }).then(function(jsonData) {
                var _items = jsonData.channel.item;
                for(var i = 0; i < _items.length; ++i)
                {
                    _items[i].title = stripHTML(_items[i].title);
                    _items[i].sale_price = (_items[i].sale_price * 1).numberFormat();
                    items.add(_items[i]);
                }
            }).catch(function(err) {
                print("Error!!");
            });
        }

        // 상세보기 페이지로 이동
        function showDetailPage(args)
        {
            selectedItem.value = args.data;
            router.push("detailPage");
        }

        module.exports = {
            items,
            searchText,
            search,
            selectedItem,
            showDetailPage
        }
    </JavaScript>

    <Navigator DefaultTemplate="searchPage">
        <!-- 검색 페이지 -->
        <Page ux:Template="searchPage">
            <DockPanel Background="#ccc">
                <DockPanel ux:Name="topPanel" Dock="Top" Background="#333">
                    <TextInput ux:Name="text" PlaceholderText="Input here" PlaceholderColor="#777" Padding="10" TextColor="#fff" CaretColor="#fff" Dock="Fill" Value="{searchText}">
                        <Rectangle Layer="Background" Margin="4">
                            <Stroke Width="2" Brush="#fff" />
                        </Rectangle>
                    </TextInput>
                    <Basic.Button Text="Search" Dock="Right">
                        <Clicked>
                            <Set searchSV.ScrollPosition="0,0" />
                            <Callback Handler="{search}" />
                        </Clicked>
                    </Basic.Button>
                </DockPanel>

                <ScrollView ux:Name="searchSV">
                    <StackPanel>
                        <Each Items="{items}">
                            <DockPanel Padding="10" Background="#fff" Clicked="{showDetailPage}">
                                <Image Url="{cover_l_url}" Dock="Left" />
                                <Text Value="{title}" Font="KoreanFont" Dock="Fill" Width="60%" Margin="10" Alignment="CenterLeft" TextWrapping="Wrap" />
                            </DockPanel>
                        </Each>
                    </StackPanel>
                </ScrollView>
            </DockPanel>
        </Page>

        <!-- 상세보기 페이지 -->
        <Page ux:Template="detailPage">
            <DockPanel Background="#fff">
                <JavaScript>
                    function goBack()
                    {
                        router.goBack();
                    }

                    module.exports = {
                        goBack
                    }
                </JavaScript>

                <DockPanel ux:Name="topPanel" Dock="Top" Background="#333">
                    <Basic.Button Text="&lt; Back" Dock="Left">
                        <Clicked>
                            <Callback Handler="{goBack}" />
                            <Set detailSV.ScrollPosition="0,0" Delay="1" />
                        </Clicked>
                    </Basic.Button>
                </DockPanel>

                <ScrollView ux:Name="detailSV" Dock="Fill">
                    <StackPanel>
                        <Image Url="{selectedItem.cover_l_url}" />
                        <StackPanel Margin="10" Orientation="Horizontal">
                            <Text Value="Title: " Font="KoreanFont" />
                            <Text Value="{selectedItem.title}" Font="KoreanFont" Width="300" TextWrapping="Wrap" />
                        </StackPanel>
                        <StackPanel Margin="10" Orientation="Horizontal">
                            <Text Value="Price: " Font="KoreanFont" />
                            <Text Value="{selectedItem.sale_price}" Font="KoreanFont" Width="300" TextWrapping="Wrap" />
                        </StackPanel>
                        <StackPanel Margin="10" Orientation="Horizontal">
                            <Text Value="Description: " Font="KoreanFont" />
                            <Text Value="{selectedItem.description}" Font="KoreanFont" Width="250" TextWrapping="Wrap" />
                        </StackPanel>
                    </StackPanel>
                </ScrollView>
            </DockPanel>
        </Page>
    </Navigator>
</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles