Promise는 콜백 예제 공유를 단순화합니다.

이 기사에서는 주로 WeChat 애플릿을 공유합니다. Promise를 사용하여 콜백 인스턴스 공유를 단순화하는 것이 모든 사람에게 도움이 되기를 바랍니다.

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를 사용하여 코드를 단순화하는 방법을 분석해 보겠습니다.

WeChat 애플릿 비동기 API는 성공과 실패의 형태이기 때문에 누군가 다음과 같은 방법을 캡슐화했습니다.

promisify.js

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

가장 간단한 것부터 먼저 살펴보겠습니다.

// 获取系统信息
wx.getSystemInfo({
   success: res => {
       // success
       console.log(res)
   },
   fail: res => {

   }
})
使用上面的promisify.js简化后:
const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
   // success
   console.log(res)
}).catch(res=>{

})

단순화된 콜백에서 들여쓰기가 하나 줄어들고, 콜백 함수가 9줄에서 6줄로 줄어든 것을 볼 수 있습니다.

콜백 피라미드의 단순화된 효과

그럼 첫 번째 콜백 피라미드를 살펴보겠습니다

const promisify = require('./promisify')
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)

// 登录
login().then(res => {
   let code = res.code
   // 请求
   pImitationPost({
       url: '/test/loginWithCode',
       data: {
           code
       },
   }).then(data => {
       // 获取userInfo
       getUserInfo().then(res => {
           let userInfo = res.userInfo
           // 请求
           pImitationPost({
               url: '/test/saveUserInfo',
               data: {
                   userInfo
               },
           }).then(data => {
               console.log(data)
           }).catch(res => {
               console.log(res)
           })
       }).catch(res => {
           console.log(res)
       })
   }).catch(res => {
       console.log(res)
   })
}).catch(res => {
   console.log(res)
})

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

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

관련 추천:

WeChat 애플릿 Promise 단순화된 콜백 예제 공유

js의 Promise 예제 분석

jQuery Promise를 올바르게 사용하는 방법

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