위 챗 애플 릿 은 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 로 코드 를 간소화 하 는 방법 을 분석 하 겠 습 니 다.
위 챗 애플 릿 비동기 api 는 모두 success 와 fail 의 형식 이기 때문에 모든 사람 이 이러한 방법 을 패키지 했다.
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 등에 도 적용 된다.
레 퍼 런 스
Promise 대상
소스 코드
promise Page 페이지
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기