在微信小程序中使用 async await

Mystery0410

已于 2022-08-26 10:45:39 修改

阅读量1.9k

点赞数 1

文章标签：小程序微信

于 2021-10-13 10:54:59 首次发布

本文链接：https://blog.youkuaiyun.com/valkyrie0/article/details/120739549

版权

本文介绍了如何在小程序开发中进行异步处理，通过封装wx.request为async函数，利用async/await语法简化代码。同时展示了如何定义全局接口地址并创建$awx辅助工具，使得在页面中调用API更加方便，例如在onShow方法中调用请求接口获取数据，并处理可能的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://segmentfault.com/a/1190000021966277

在app.js中加上：

//接口请求地址
wx.$requestServe = "http://localhost:3087/employee_applet";

//async、await
function promisify(fn) {
  return async function (args) {
    return new Promise((resolve, reject) => {
      fn({
        ...(args || {}),
        success: (res) => resolve(res),
        fail: (err) => reject(err),
      });
    });
  };
}
function toAsync(...names) {
  return (names || [])
    .map((name) => ({ name, member: wx[name] }))
    .filter((t) => typeof t.member === "function")
    .reduce((r, t) => {
      r[t.name] = promisify(wx[t.name]);
      return r;
    }, {});
}
Promise.prototype.ignoreError = function () {
  return this.catch(() => {});
};
wx.$awx = toAsync("request");

App({
  onShow(option) {},
  globalData: {},
});

3、在页面中使用：

async onShow() {
  let res = await wx.$awx
    .request({
      url: `${wx.$requestServe}/compareFaceToIdCard`,
    })
    .ignoreError();
  console.log(res);
}