微信小程序异步接口 Promise 化封装与上下文处理

作者:青柠时间:2026-10-23 13:40:00浏览:494

本文介绍如何将微信小程序异步接口封装为 Promise 以支持 async/await。针对 wxApi 作为参数传递时导致的 this 指向错误,通过引入 context 参数并调用 api.call 解决。同时展示了针对 cameraContext 等特定对象的方法封装示例,确保接口调用的正确性。

Promise 封装基础实现

近期开发微信小程序时,为了能够使用 async/await 语法,需要将微信提供的异步操作封装为 Promise 对象。基于此需求,编写了一个简单的 promise(wxApi) 函数来实现这一转换。


/**
 * @function promise - 将 wx 接口 promise 化
 * 
 * @param { String|Function } wxApi - 需要转换的接口/接口名
 * @param { Object|Any } [originParam = {}] - 原接口要求的参数对象
 * @param { Object|Any } [extra] - 接口要求的其他参数
 */
function promise(wxApi, originParam = {}, extra){
 const api = wxApi instanceof Function?
  wxApi:
  wx[wxApi];

 return new Promise((done, fail) =>
  api(Object.assign(
   originParam,
   {
    success: done,
    failed: fail
   }
  ),
  extra)
 );
}

解决接口调用上下文指向问题

然而,在调用拍照接口进行测试时,控制台报错 'this._invokeMethod is not a Function'。分析可知,由于 wxApi 作为参数传入,导致执行时的 this 指向与预期不符。因此,需要对函数进行修改,显式指定执行上下文。


/**
 * @function promise - 将 wx 接口 promise 化
 * 
 * @param { String|Function } wxApi - 需要转换的接口/接口名
 * @param { Object|Any } [originParam = {}] - 原接口要求的参数对象
 * @param { Object|Any } [context = wx] - 执行上下文
 * @param { Object|Any } [extra] - 接口要求的其他参数
 */
function promise(wxApi, originParam = {}, context = wx, extra){
 const api = wxApi instanceof Function?
  wxApi:
  context[wxApi];

 return new Promise((done, fail) =>
  api.call(context, Object.assign(
   originParam,
   {
    success: done,
    failed: fail
   }
  ),
  extra)
 );
}

特定对象接口的封装示例

鉴于大部分接口属于 wx 对象的方法,上述 promise 方法在多数场景下已足够便捷。但拍照接口属于 cameraContext 对象的方法,因此需要传递 createCameraContext 方法的返回值作为上下文。


/**
 * @function takePhoto - promise风格的拍照接口
 * 
 * @param { Object|Any } [options = {}] - 相机配置
 * 
 * @return {Promise}
 */
export function takePhoto(options = {}){
  const tempOptions = {
    quality: 'high',
    ...options
  }

 const cameraContext = createCameraContext();

 return promise(cameraContext.takePhoto, tempOptions, cameraContext);
}

以上内容即为本文的全部介绍,希望能为各位的学习提供一定帮助,同时也欢迎大家继续支持本站。

作者最新文章