WeChat 애플릿에서 Promise에 의한 비동기 프로세스 처리 구현 프로세스

이 글은 주로 WeChat 미니 프로그램의 비동기 프로세스 처리를 위한 Promise 사용에 대한 관련 정보를 소개합니다. 다음은 Promise를 사용하여 비동기 프로세스를 처리하는 방법에 대한 자세한 설명과 도움이 필요한 친구가 참조할 수 있는 구체적인 단계를 제공합니다.

WeChat 미니 프로그램에서 비동기 프로세스 처리를 위해 Promise를 사용하는 예제에 대한 자세한 설명

우리는 JavaScript가 단일 프로세스에서 실행되고 동기 작업이 프로그램 실행을 차단한다는 것을 알고 있습니다. 예를 들어, 브라우저 페이지 프로그램에서 동기화된 코드 조각을 실행하는 데 오랜 시간이 걸리면(예: 대규모 루프 작업) 페이지가 중단됩니다.

그래서 JavaScript에서는 프로그램에 대한 성능 및 경험상의 이점을 제공하기 위해 일부 비동기 기능이 제공됩니다. 예를 들어 코드는 setTimeout()에서 실행될 수 있으며 Ajax를 사용하여 서버에 데이터를 보냅니다. . 비동기 데이터 요청을 수행합니다. 이러한 비동기 코드는 현재 인터페이스 기본 프로세스를 차단하지 않으며 인터페이스는 여전히 유연하게 작동할 수 있습니다. 해당 처리는 비동기 코드 실행이 완료된 후에 수행됩니다.

일반적인 비동기 코드 조각은 다음과 같습니다:

function asyncFunc(callback) {
 setTimeout(function () {
  //在这里写你的逻辑代码
  //...

  //逻辑代码结束，执行一个回调函数
  callback();
 }, 5000);
}

또는:

function getAccountInfo(callback, errorCallback) {
 wx.request({
  url: '/accounts/12345',
  success: function (res) {
   //...
   callback(data);
  },
  fail: function (res) {
   //...
   errorCallback(data);
  }
 });
}

그런 다음 다음과 같이 호출합니다.

asyncFunc(function () {
 console.log("asyncFunc() run complete");
});

getAccountInfo(function (data) {
 console.log("get account info successfully:", data);
}, function () {
 console.error("get account info failed");
});

이것은 콜백 함수를 사용하여 코드 실행 흐름을 제어하는 ​​방법입니다. 이것은 괜찮고 이해하기 쉬운 것 같습니다.

그러나 코드 조각에 비동기 작업이 너무 많고 이러한 비동기 작업이 순서대로 실행되도록 해야 한다면 코드는 다음과 같이 매우 나빠 보일 것입니다.

asyncFunc1(function(){
 //...
 asyncFunc2(function(){
  //...
  asyncFunc3(function(){
   //...
   asyncFunc4(function(){
    //...
    asyncFunc5(function(){
      //...
    });   });
  });
 });
});

이러한 코드 가독성 및 유지 관리 용이성 상상할 수 있습니다. 또한 콜백 함수의 실제 문제는 다음과 같습니다.

이것은 return 및 throw 키워드를 사용하는 능력을 앗아갑니다.

그렇다면 이 문제를 개선할 수 있는 방법은 무엇일까요? 대답은 '예'입니다. Promise 개념의 출현으로 이 모든 것이 잘 해결되었습니다. Promise가 무엇인지에 대해서는 검색 후 소개가 많이 있습니다. 여기서는 Promise를 사용하여 문제를 해결하는 방법에 대해 주로 설명하겠습니다.

Promise를 사용하면 위의 예는 어떤 모습일까요? 먼저 이 함수를 Promise로 변경해 보겠습니다.

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

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

그런 다음 어떻게 호출되는지 살펴보겠습니다.

asyncFunc1()
 .then(asyncFunc2)
 .then(asyncFunc3)
 .then(asyncFunc4)
 .then(asyncFunc5);

이러한 비동기 함수는 순서대로 하나씩 실행됩니다.

Promise는 ES6에서 기본적으로 지원되지만 Promise가 기본적으로 지원되지 않는 환경에서는 Q.js 및 Bluebird와 같이 Promise를 지원하는 많은 타사 라이브러리가 있습니다. 표준 Promise API 외에도 일반적으로 비표준이지만 매우 유용한 API를 제공하여 비동기 프로세스 제어를 더욱 우아하게 만듭니다.

WeChat 애플릿의 API 문서에서 wx.setStorage(), wx.getStorage(), wx.getLocation() 등과 같이 프레임워크에서 제공하는 JavaScript API의 많은 기능이 실제로 비동기식임을 알 수 있습니다. 제공되는 콜백 처리 방법이기도 합니다. 성공, 실패, 완료 콜백 함수를 매개변수에 전달하여 작업의 성공 또는 실패를 별도로 처리할 수 있습니다.

예:

wx.getLocation({ 
 type: 'wgs84', 
 success: function(res) { 
  var latitude = res.latitude 
  var longitude = res.longitude 
  var speed = res.speed 
  var accuracy = res.accuracy 
 },
 fail: function() {
  console.error("get location failed")
 }
})

WeChat 애플릿의 비동기 API가 Promise를 지원하도록 만들 수 있나요? 대답은 '예'입니다. 물론 Promise를 사용하여 이러한 API를 하나씩 래핑할 수 있지만 이는 여전히 꽤 번거로운 일입니다. 그러나 미니 프로그램의 API 매개변수 형식은 상대적으로 균일하므로 하나의 개체 매개변수만 허용하고 이 매개변수에 콜백이 설정되므로 이는 통합 처리에 편리함을 제공하며 비-개체 매개변수를 작성할 수 있습니다. 이러한 작업을 완료하는 침입 도구 메소드:

이 도구 메소드를 util.js라는 파일에 작성한다고 가정해 보겠습니다.

var Promise = require('../libs/bluebird.min')  //我用了bluebird.js
function wxPromisify(fn) { 
 return function (obj = {}) {  
  return new Promise((resolve, reject) => {   
   obj.success = function (res) {    
    resolve(res)   
   }   

   obj.fail = function (res) {    
    reject(res)   
   }   

   fn(obj)  
  }) 
 }
}

module.exports = { 
 wxPromisify: wxPromisify
}

그런 다음 이 메소드를 사용하여 원래 콜백 API를 The way로 변경하는 방법을 살펴보겠습니다. 약속 만들기:

var util = require('../utils/util')

var getLocationPromisified = util.wxPromisify(wx.getLocation)

getLocationPromisified({
 type: 'wgs84'
}).then(function (res) {
 var latitude = res.latitude 
 var longitude = res.longitude 
 var speed = res.speed 
 var accuracy = res.accuracy 
}).catch(function () {
 console.error("get location failed")
})

이해하기 쉽나요?

위 내용은 WeChat 애플릿에서 Promise에 의한 비동기 프로세스 처리 구현 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!