위 챗 애플 릿 의 onLaunch 와 onload 비동기 문제 에 대한 상세 한 설명

상기 문제:
전단 시간 에 위 챗 애플 릿 몰 프로젝트 를 개 발 했 습 니 다.이 프로젝트 는 애플 릿 에 들 어가 면 wx.login({})이라는 api 를 통 해 사용자 로그 인 을 하고 시스템 배경 에 있 는 사용자 기본 정 보 를 얻 는 것 이 필요 합 니 다.그 전에 위 챗 애플 릿 의 App.js 에서 onLaunch(애플 릿 초기 화 완료)방법 이 다른 페이지 의 onload 방법 보다 먼저 실 행 될 것 이 라 고 생각 했 습 니 다.그러면 문제 가 생 겼 습 니 다.저 는 애플 릿 홈 페이지 에 들 어 갈 때마다 가끔 onlaunch 방법 을 먼저 실행 하고 가끔 은 첫 페이지 의 onload 방법 을 먼저 실행 합 니 다.마지막 으로 확정 을 거 쳤 습 니 다.위 챗 애플 릿 에서 이 두 가지 방법 은 선후 순 서 를 집행 하지 않 았 습 니 다.왜냐하면 그들 은 모두 비동기 로 실 행 했 기 때 문 입 니 다.물론 위 챗 애플 릿 을 개발 한 개발 자 들 은 위 챗 요청 데이터 가 모두 비동기 적 으로 실 행 된 것 을 알 고 있 습 니 다.예 를 들 어 같은 onload 에서 두 개의 요청 데 이 터 를 쓰 는 방법 은 반드시 선착순 으로 실 행 될 수 있 는 것 이 아 닙 니 다.이것 이 바로 전설의 비동기 지옥 입 니 다.
해결 방법:
물론 이 실행 순 서 는 위 챗 애플 릿 의 비동기 실행 요청 으로 인 한 것 임 을 알 았 다.우 리 는 Promise 를 사용 하여 비동기 프로 그래 밍 문 제 를 해결 할 수 있다.제 해결 방법 은 우선 app.js 에서 전체 방법 을 정 의 했 습 니 다.애플 릿 에 로그 인하 여 사용자 정 보 를 요청 하 는 인터페이스 입 니 다.첫 페이지 에 들 어 갈 때마다 제 가 사용자 정보 캐 시 를 가지 고 있 는 지 여 부 를 판단 합 니 다.존재 하지 않 는 다 면 app.js 의 전체 방법 으로 데 이 터 를 가 져 오 라 고 요청 합 니 다.여기 서 저 는 Promise 의 기본 적 인 용법 을 상세 하 게 소개 하지 않 겠 습 니 다.완 일 봉 은 이미 매우 상세 하기 때문에 여러분 은 클릭 하여[http://es6.ruanyifeng.com/#docs/promise#Promise-all]을 볼 수 있 습 니 다.
방법 구현:
App.js 방법 구현:

App({
onLaunch: function() {
console.log('App Launch')
//        
},
/**
*       
*/
globalData: {
openid: '', //  openid
userId: '', //    
},
/**
*         (  onlaunch onload      )
*/
userLogin: function() {
var that = this;
//  promise  
return new Promise(function(resolve, reject) {
//       
wx.login({
success: function(res) {
if (res.code) {
console.log("      code ：" + res.code);
//  wx.request    code      openid，         
wx.request({
url: 'https://www.xxxx.xxx.api', //           【  ，     https      】
data: {
code: res.code //code  
},
header: {
'content-type': 'application/json' //    
},
success(res) {
console.log(res.data)
if (res.data.errcode == 0) {
//        
that.globalData.openid = res.data.openid;
that.globalData.userId = res.data.UserId;
//  session   
wx.setStorageSync("userId", that.globalData.userId)
console.log(that.globalData.userId);
console.log(that.globalData.openid);
//promise        
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '    '
})
 },
complete: () => {

} //complete          ，          
})
} 
else 
{
reject("error");
}
}
})
})
}
});

index.js 구현:

const app=getApp();//   app.js
page({

onLoad: function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("          ：" + UserId);
if (UserId == '') {
app.userLogin().then(res => {
console.log("promise      ：");
console.log(res);
if (res.errcode == 0) {
//                        
that.GetData();
}
})
}
else
{
//      
that.GetData();
}

}
,
GetData()
{
//                 

}
})

요약:
물론 비동기 반전 을 해결 하 는 방법 은 여러 가지 가 있 지만 저 는 여기 서 좋 은 것 만 말 하고 여러분 들 이 어떤 생각 이 있 으 면 같이 공부 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.