WeChat 애플릿(async/await)의 비동기 처리 예시에 대한 자세한 설명

저는 Promise와 Co를 모두 수행했지만 마침내 ES7을 위한 궁극적인 솔루션인 async/await를 생각해내지 않을 수 없었습니다.

async/await도 Promise와 함께 사용됩니다. 먼저 샘플 코드를 살펴보겠습니다. 이 사용법은 이전에 이야기한 co 사용법과 매우 유사합니다:

function myAsyncFunc() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("myAsyncFunction done!");
      resolve({data: "Hello,World"});
    }, 5000);
  });
}

async function test() {
  var result = await myAsyncFunc();
  console.log(result.data); //Hello,World
}

test();

작은 프로그램에서 사용 async/await를 사용하는 경우 async/await를 사용하여 코드를 컴파일하려면 추가 Babel 플러그인이 필요하기 때문에 WeChat 웹 개발자 도구의 Babel 변환 도구에 의존하는 것만으로는 충분하지 않습니다. 그래서 이번에는 Babel을 호출하는 스크립트를 직접 작성해야 합니다.

프로젝트에서 먼저 "ES6에서 ES5로 전환" 옵션을 꺼야 합니다. 이제 이 작업을 직접 수행해야 하기 때문입니다.

옵션을 끄세요

그런 다음 Gulp를 사용하여 스크립트를 작성하고 Gulp에서 Babel을 호출하여 코드를 컴파일하겠습니다. 물론 Grunt, Webpack 등과 같은 다른 도구를 사용할 수도 있습니다. 여기를 참조하여 사용하는 빌드 도구에서 Babel을 사용하는 방법을 알아볼 수 있습니다.

중요한 점은 Babel을 호출할 때 async-to-generator, async-generator-functions 및 기타 플러그인과 같이 Babel이 async/await를 지원하도록 플러그인을 구성해야 한다는 것입니다. . 편의상 프리셋(즉, 공식적으로 구성된 플러그인 패키지)을 직접 사용하면 됩니다. 두 가지 프리셋 중 es2017 또는 최신 버전이 우리의 요구 사항을 충족할 수 있습니다.

이것은 Babel의 구성 파일입니다: .babelrc

{  
  "presets": [ "latest" ],  
  "plugins": []
}

그런 다음 gulpfile.js에서 Babel을 통해 미니 프로그램 프로젝트의 모든 js 파일을 컴파일합니다:

gulp.task('scripts', () => {  
  return gulp.src('./src/**/*.js')    
    .pipe(babel())
    .pipe(gulp.dest('./dist'))
})

좋아요, 이것이 코드를 컴파일하기 위해 해야 할 일입니다. 다음으로, 미니 프로그램 코드에서 변경될 몇 가지 사항에 대해 이야기해 보겠습니다.

1. 생성기 지원 라이브러리를 소개합니다.

Babel이 번역한 코드는 aysnc/await 함수를 전달합니다. co 라이브러리와 유사한 방식으로, 즉 생성기를 사용합니다. 따라서 co를 사용할 때와 마찬가지로 생성기 기능을 지원하려면 regeneratorRuntime을 사용해야 합니다. Facebook의 오픈 소스 재생기 라이브러리를 사용할 수 있습니다. npm을 통해 이 재생성기 라이브러리를 다운로드할 수 있습니다:

npm install regenerator

그런 다음 다운로드한 파일에서 regenerator-runtime.js라는 파일을 꺼내 애플릿 코드에 넣습니다.

2. 코드 삽입

async/await 기능을 사용해야 하는 코드 파일에 재생성자 라이브러리를 삽입합니다.

const regeneratorRuntime = require('../../libs/regenerator-runtime')

그런 다음 안전하게 추가할 수 있습니다. 귀하의 코드 여기서는 async/await를 사용하여 비동기 처리를 작성합니다.

위 내용은 WeChat 애플릿(async/await)의 비동기 처리 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!