카카오API request 문의드립니다

JavaScript
1

안녕하세요,카카오로그인을 개발하고 있습니다.
카카오로그인 버튼 클릭 시
카카오톡 채널 추가 상태 값과 SMS 수신 약관 동의 여부 값을 받아와서
저희 서비스 로그인이 되도록 하고 싶습니다.

아래처럼 함수를 짰는데
scopes와 terms를 각각 호출하여 받은 값으로 최종 처리를 하고 싶은데
response.scopes[0].agreed 값이 Y임에도 불구하고 아래 부분에 console.log(kakao_channel_yn);를 찍어보면
계속 N으로 되더라구요…

.then 안에서만 값을 활용할 수 있는건가요?

function loginWithKakao() {
        // 로그인 창을 띄웁니다.
        Kakao.Auth.login({
            throughTalk: false,
            success: function(authObj) {
                Kakao.API.request({
                    url: '/v2/user/me',
                    success: function(res) {
                        // 카카오톡 채널 추가 상태 값 get
                        var kakao_channel_yn = 'N';
                        Kakao.API.request({
                            url: '/v2/user/scopes',
                            data: { scopes: ['plusfriends'] }
                        })
                        .then(function(response) {
                            if( response.scopes[0].agreed ){
                                kakao_channel_yn = 'Y';
                            }

                            //snsloginrequest_kakao(res.kakao_account.email, res.id, res.kakao_account.ci, res.kakao_account.birthyear, res.kakao_account.birthday, kakao_channel_yn);
                        })
                        .catch(function(error) {
                            alert('잠시 후 다시 시도해주세요. [' + error + ']');
                        });

                        // SMS 수신동의 여부 값 get
                        var sms_agree_yn = 'N';
                        Kakao.API.request({
                            url: '/v1/user/service/terms',
                        })
                            .then(function(response) {
                                console.log(response);
                            })
                            .catch(function(error) {
                                alert('잠시 후 다시 시도해주세요.');
                            });

                        console.log(kakao_channel_yn);
                    },
                    fail: function(error) {
                        console.log(error);
                    }
                });

            },
            fail: function(err) {
                console.log(err);
                console.log(JSON.stringify(err));
            }
        });
    }

초보개발자라 질문글을 많이 남기게 되네요ㅠㅠ
답변 주시면 감사하겠습니다.

2

Kakao.API.request 는 Promise를 반환하는 비동기 함수 입니다.
API를 호출하고 응답이 오기전에 console.log(kakao_channel_yn);가 먼저 호출됩니다.
즉, kakao_channel_yn = ‘Y’ 가 동작하기 전에 로그를 먼저 찍게 되는것입니다.

Promise.all 을 사용하거나 jquery의 $.when을 사용하여 두 비동기 이벤트 함수를 묶으시면 될것 같습니다.

1개의 좋아요
3

답변 감사합니당 ㅠㅠ
죄송하지만 아주 간략하게 대략적인 샘플코드로 알려주실 수 있으실까요ㅠㅠ?

4

jquery 사용중이시고 서비스에서 ie11 지원하신다면 아래처럼 사용해보시면 좋을것 같아요

https://api.jquery.com/jquery.when/

var resScopes, resTerms;
var scopesPromise = Kakao.API.request({
    url: '/v2/user/scopes',
    data: {
        scopes: ['plusfriends']
    }
}).then(function(res) {
    resScopes = res;
});
var termsPromise = Kakao.API.request({
    url: '/v1/user/service/terms',
}).then(function(res) {
    resTerms = res;
});
$.when([scopesPromise, termsPromise]).then(function() {
    console.log(resScopes, resTerms);
});