소규모 프로그램에 대한 단순화된 콜백 약속

이번에는 미니 프로그램의 Promise 단순화된 콜백을 소개해 드리겠습니다. 미니 프로그램의 단순화된 Promise 콜백의 주의사항은 무엇인지 살펴보겠습니다.

Promise는 콜백 함수 및 이벤트와 같은 기존 솔루션보다 더 합리적이고 강력한 비동기 프로그래밍 솔루션입니다. ES6는 이를 언어 표준에 작성하고 사용법을 통일했으며 기본적으로 Promise 객체를 제공했습니다.

Promise라고 불리는 것은 단순히 미래에 종료될 이벤트(보통 비동기 작업)의 결과를 저장하는 컨테이너입니다. 구문론적으로 Promise는 비동기 작업에 대한 메시지를 얻을 수 있는 개체입니다. Promise는 통일된 API를 제공하며, 다양한 비동기 작업을 동일한 방식으로 처리할 수 있습니다.

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=>{
})

getSystemInfo

간단한 콜백에 들여쓰기가 하나 줄어든 것을 확인할 수 있습니다. , 콜백 함수가 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 등에도 적용 가능합니다.

Reference

Promise object

source code

tomfriwel/MyWechatAppDemo의 promisePage 페이지

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주의하세요. PHP 중국어 웹사이트의 기사!

추천 자료:

React 개발 중 eslint 구성

HTML을 구현하기 위한 Vue 열거 유형

위 내용은 소규모 프로그램에 대한 단순화된 콜백 약속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!