집 > 기사 > 위챗 애플릿 > WeChat 애플릿의 비동기 처리 정보

WeChat 애플릿의 비동기 처리 정보

不言원래의: 2018-06-27 13:49:212030검색

이 글은 주로 WeChat 미니 프로그램의 비동기 처리 관련 정보를 자세히 소개합니다. 관심 있는 친구가 참고할 수 있습니다.

이 글의 예는 WeChat 미니의 구체적인 비동기 처리 방법을 공유합니다. , 참고로 구체적인 내용은 다음과 같습니다

문제를 직접 살펴보세요:

그런 다음 인쇄된 결과를 살펴보세요:

위 두 사진에서 볼 수 있듯이 네트워크 요청은 코드에서 먼저 실행된 다음 인쇄된 내용이 변수로 실행되지만 아래에 인쇄된 결과에서는 결과가 먼저 실행되고(aafn 함수) 네트워크 요청 성공의 콜백에 데이터가 반환됩니다. 할당된 변수의 값이 인쇄됩니다.

왜 Aafn이 먼저 실행되고 인쇄된 값이 할당되지 않습니까?

wx.request는 비동기식 요청이므로 데이터를 요청하는 동안에도 함수가 계속 실행될 수 있습니다. 따라서 값이 할당되기 전에 변수의 값이 인쇄됩니다.

이 상황을 해결하는 방법은 무엇입니까?

방법 1:

중첩

wx.request의 성공 콜백에서 aafn 함수를 실행합니다.

그런 다음 결과를 실행합니다.

값을 얻습니다. 여기

하지만 만약에 논리는 매우 복잡하며 다음과 같이 많은 비동기 레이어를 사용해야 합니다.

asyncFn1(function(){
 //...
 asyncFn2(function(){
  //...
  asyncFn3(function(){
   //...
   asyncFn4(function(){
    //...
    asyncFn5(function(){
      //...
    });
   });
  });
 });
});

코드가 매우 보기 흉하고 코드의 가독성과 유지 관리성이 좋지 않습니다.

이 문제를 해결하는 방법 문제? 약속(Promise) 개념의 출현은 이 모든 것을 잘 해결해줍니다. 여기서는 길게 말하지 않겠습니다. 관심 있으신 분은 Promise 소개 링크를 살펴보세요

먼저 Promise의 길을 살펴보세요:

function asyncFn1(){
 return new Promise(function (resolve, reject) {
  //...
 })
}

// asyncFn2,3,4,5也实现成跟asyncFn1一样的方式...

Call

asyncFn1()
 .then(asyncFn2)
 .then(asyncFn3)
 .then(asyncFn4)
 .then(asyncFn5);

, 비동기 함수를 순차적으로 실행할 수 있습니다

WeChat 애플릿의 비동기 API는 어떻게 Promise를 지원하나요? Promise를 사용하여 이러한 API를 하나씩 래핑할 수 있지만 여전히 꽤 번거로운 작업입니다. 그러나 미니 프로그램의 API 매개변수 형식은 비교적 균일합니다. 하나의 개체 매개변수만 허용하고 이 매개변수에 콜백이 설정되므로 이러한 작업을 완료하기 위한 도구 메서드를 작성하는 것이 편리합니다.

먼저 bluebird.js라는 파일을 참조해야 합니다.

다운로드하려면 블루버드 공식 웹사이트로 이동하세요.

다운로드할 수 없는 것 같지만 클릭하여 입력한 다음 복사할 수 있습니다. , 미니 프로그램에서 js 파일을 생성하고, 이 js에 코드를 복사한 후 인용해 보세요.

그런 다음 JS를 작성하고 그 안에 도구 메소드를 작성하십시오.

다음은 prom.js

그런 다음 사용해야 하는 페이지의 js에 prom.js를 도입하십시오.

전화:

결과 인쇄

끝입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

WeChat 애플릿의 비동기 처리 정보

관련 기사