Promise 용도와 그 해석에 대해서

[쿠로로]

Promise와 async 개념에 대한 명확한 정립을 위해 신청한 ES6강의였습니다만 

제가 실제로 사용해야했던 코드들을 다시 읽으면서 강의에서 들은 내용을 보았을 때 그대로 적용이 잘 안되어서요.

참고로 프레임워크는 SAP를 쓰고있습니다.

Promise/async-await이 나오기 전에 만들어진 API들은 비동기 처리를 콜백으로 설계했으므로

= 콜백 기반
= await 못 씀
= 직접 new Promise()로 감싸야 await 사용 가능

라는 말을 본 적이 있는데요.

" Promise는 비동기 처리를 가능하게하는 마법의 문법같은게 아니다 "
라고 하셨지만 아래의 경우 그냥 단순하게 async안에서 Promise를 사용하는 것이 성공/실패를 구분하는 도구로만 해석되기엔 어렵지않을까요?

            window.fetch = async function (...args) {
                const res = await originalFetch(...args);
                if (res.status === 401) {
                    // 이미 로그인 페이지면 무시
                    if (sessionStorage.getItem("jwt")) {
                        sessionStorage.removeItem("jwt");
                        sessionStorage.removeItem("userId");
                        sessionStorage.removeItem("nick");

                        const { default: MessageBox } = await new Promise(resolve =>
                            sap.ui.require(["sap/m/MessageBox"], m => resolve({ default: m }))
                        );

물론 이건 SAP 프레임워크의 import 문법을 Promise로 감쌌다.. 라는것으로 이해는 하고 있었습니다만
 왜 Promise가 어떤의미로 이게 감싸져서 작동하는지에 대해서 '성공/실패 판정'을 위한 도구이다..로는 바로 이해가 안되어서요


SAP 프레임워크 문법과 거리가 있는 아래의 경우도 유사하게 느낍니다.

        moveToMyLocation: async function () {
            if (!this._map) return;
            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));

그리고 강의에서 Promise.all()이나 Promise.resolve() 같은 것도 다뤘었나요? 강의에서 보지 못한 것 같아서요.
아래의 함수도 Promise가 진짜 어러번 쓰이는데.. 스스로 제대로 코드리뷰를 못해서 속상합니다.

        async _fetchAllBookmarks() {
            this._controller.getView().setBusy(true);
            const jwt    = sessionStorage.getItem("jwt");
            const userId = sessionStorage.getItem("userId");

            try {
                // 북마크 + 내 리뷰 목록 병렬 조회
                const [bmRes, rvRes] = await Promise.all([
                    fetch(
                        /jmt/PersonalMarkers
                        + ?$filter=user_ID eq '${userId}'
                        + &$expand=restaurant($select=ID,place_name,category_name,
                        + address_name,road_address_name,latitude,longitude,phone,place_url)
                        + &$orderby=createdAt desc,
                        { headers: { "Authorization": Bearer ${jwt} } }
                    ),
                    fetch(
                        /jmt/Reviews?$filter=createdBy eq '${userId}'&$select=restaurant_ID,
                        { headers: { "Authorization": Bearer ${jwt} } }
                    )
                ]);
                if (!bmRes.ok) throw new Error(await bmRes.text());
                const [bmData, rvData] = await Promise.all([
                    bmRes.json(),
                    rvRes.ok ? rvRes.json() : Promise.resolve({ value: [] })
                ]);
                const reviewedIds = new Set(rvData.value.map(r => r.restaurant_ID));

                this._allBookmarks = bmData.value.map(b => {
                    const r = b.restaurant || {};
                    const categoryFull  = r.category_name || "";
                    const categoryClean = categoryFull.replace(/^음식점\s*>\s*/, "");
                    const categoryFirst = categoryClean.split(">")[0].trim();

                    return {
                        _markerId:          b.ID,
                        restaurant_ID:      r.ID,
                        place_name:         r.place_name         || "",
                        category_name:      categoryFull,
                        categoryDisplay:    categoryClean,         // 리스트 표시용 (음식점> 제거 후 전체 경로)
                        categoryFirst,                             // 필터 판단용
                        displayAddress:     r.road_address_name  || r.address_name || "",
                        road_address_name:  r.road_address_name  || "",
                        address_name:       r.address_name       || "",
                        latitude:           r.latitude,
                        longitude:          r.longitude,
                        phone:              r.phone              || null,
                        place_url:          r.place_url          || null,
                        memo:               b.memo               || null,
                        createdAt:          b.createdAt,
                        createdAtFormatted: date.formatDate(b.createdAt),
                        hasMyReview:        reviewedIds.has(r.ID)
                    };
                });

                this._applyFiltersAndRender();

            } catch (e) {
                console.error("북마크 조회 실패", e);
            } finally {
                this._controller.getView().setBusy(false);
            }
        }

• 이 게시글은 쿠로로에 의해 3 월, 1 주 전에 수정됐습니다.

[codingapple]

Promise로 감싸놓는 이유는 
나중에 그 코드를 쓰는 사람이 특정 상황에는 성공코드, 특정상황에서는 실패코드를
await 아니면 .then으로 이쁘고 쉽게 쓸 수 있게 만들려고 감싸는 경우가 많아서
sap.ui.require 어쩌구 저것도 나중에 await 붙여서 쓸 수 있게 디자인한 것 같군요 

Promise.all은 여러 Promise들이 다 성공했을 때 특정코드 실행해주는건데 
실제로 병렬기능은 아니겠지만 병렬처리하는 느낌으로다가 쓸 수 있게 해줍니다

[쿠로로]

여건이 된다면 Promise관련해서 강의 내용이 보충되었으면 하는 바람이 있습니다.

Promise가 rejcet 뺴고 resolve만 쓸 수 있다거나 Promise.all(), Promise.resolve() 같은 내용은 강의에 없었던 것으로 기억하고

이에따라 스스로 찾아봐야하는 영역이 되었네요.. ;;

[codingapple]

알겠습니다

[글쓴이]

글