Promise를 사용하여 콜백 단순화

프로젝트에는 다양한 비동기 작업이 등장합니다. 비동기 작업의 콜백에 비동기 작업이 있으면 콜백 피라미드가 나타납니다.

예를 들어, 다음

// 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台
// 登录
wx.login({
    success: res => {
        let code = res.code
        // 请求
        imitationPost({
            url: '/test/loginWithCode',
            data: {
                code
            },
            success: data => {
                // 获取userInfo
                wx.getUserInfo({
                    success: res => {
                        let userInfo = res.userInfo
                        // 请求
                        imitationPost({
                            url: '/test/saveUserInfo',
                            data: {
                                userInfo
                            },
                            success: data => {
                                console.log(data)
                            },
                            fail: res => {
                                console.log(res)
                            }
                        })
                    },
                    fail: res => {
                        console.log(res)
                    }
                })
            },
            fail: res => {
                console.log(res)
            }
        })
    },
    fail: res => {
        console.log(res)
    }
})

다음은 Promise를 사용하여 코드를 단순화하는 방법을 분석합니다

WeChatmini 프로그램비동기 API는 성공과 실패의 형태이므로 누군가 이러한 방법을 캡슐화했습니다. ㅋㅋㅋ 콜백, 콜백 함수가 9줄에서 6줄로 줄었습니다.

콜백 피라미드의 단순화된 효과그럼 첫 번째 콜백 피라미드를 살펴보겠습니다

module.exports = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
        });
    }
}

단순화 효과가 매우 뚜렷하다는 것을 알 수 있습니다.

웹페이지나 nodejs 등에도 적용 가능합니다.

관련 추천:

promisify.js간단한 콜백 예시 공유 약속

WeChat 애플릿 getUserInfo 콜백에 대한 자세한 설명

jQuery 콜백 메소드 사용에 대한 자세한 설명

위 내용은 Promise를 사용하여 콜백 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!