在微信小程序中使用 ES7 async解决回调地狱

最新推荐文章于 2024-11-16 18:53:04 发布

weixin_33834628

最新推荐文章于 2024-11-16 18:53:04 发布

阅读量1.2k

点赞数

文章标签：后端游戏

原文链接：https://juejin.im/post/5ce75ed55188255b99215703

版权

在我们日常项目开发阶段，会遇到很多异步的函数，包括网络请求，微信的官方API等。这些函数如果不进行封装直接使用的话，会造成回调地狱的问题，回调函数一层套着一层，代码难以阅读，后期难以维护的问题。比如说下面这段代码.

我们可以使用 ES7中的async 解决这些回调问题，但是小程序并不支持async，网上也有很多人文章教我们如何在小程序中使用async 引入一个库 facebook/regenerator。但是大部分文章并没有告诉你使用哪个版本，我使用的 0.11.1的版本，其他版本会报错。将package文件夹拷出来放在你项目中的任何一个文件夹中就可以了。

然后在代码中导入

const regeneratorRuntime = require('../../libs/runtime-module.js')
复制代码

然后我们把请求简单封装一下（其实下面的代码还可以在封装一层）

export const loginBindo = ({ username, password }) => {
  return new Promise((resolve, reject) => {
    let res;
    return wx.request({
      url: 'https://test.com/api/login',
      data: {
        username,
        password,
      },
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        resolve(res.data);
      },
      fail(err) {
        reject(err);
      },
    });
  });
};
复制代码

App({
  onLaunch: async function () {
    this.myfunc();
  },
  globalData: {
    userInfo: null,
  },
  myfunc: async function() {
    console.log('test');
    const user = await loginBindo({
      username: 'test@test.com',
      password: 'test',
    });
    console.log('test', user);
    this.setData({
        userInfo: user,
    });
  },
});
复制代码

然后我们看一下打印的内容

清爽多了0.0 PS: “你咋搞微信小程序啦？” “后端让我弄一个调他们的小程序支付接口” 我：“需要考虑维护吗？” 后端：“不用考虑维护” 我：“那我懂你的意思了”

转载于:https://juejin.im/post/5ce75ed55188255b99215703