微信小程序异步接口 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);
}
以上内容即为本文的全部介绍,希望能为各位的学习提供一定帮助,同时也欢迎大家继续支持本站。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
