有经验的小程序开发者，会觉得success回调长，fail忘记写导致异常白屏；对此自己写了promise.then，然后还是觉得不够sync，那么可以试试await-input

npm i await-input

// 在入口文件引入即可
require('await-input')
或
import('await-input')

基本用法
const [ errInfo, result ] = wx.request.input({url: '', method: ''});
if (errInfo) {
    console.log(errInfo);
    return;
}
doSomethingWith(result);

声明

本方案目前支持列表如下，如有新增需求，请联系邮箱[email protected]

1.uniapp、Taro；

2.微信小程序、支付宝小程序、百度小程序、字节跳动小程序、qq小程序；

3.含有wx全局变量的微信环境下的H5，含有my全局变量的支付宝环境下的H5，百度swan、字节tt、QQqq亦如此。 （此类环境下，先引入wx包，再引入await-input包)

痛点

uniapp、Taro、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、qq小程序均存在以下垒码问题

1.success回调嵌套多层success，fail遗漏处理引发白屏；

2.由success和fail引发的书写结构呈现左、右、右、右，左左等迂回结构；逻辑多的情况下，第一个success对应的fail不好找，也容易出现对称结构书写错乱的问题；

3.层层嵌套造成了可读性差、维护性不够友好的问题；

4.容易忘记对于异常错误的处理，导致白屏或假死。

解决方案

可以针对某个应用函数，自我封装promise，但是then的调用书写，还是不够sync。于是：

结合nodejs谨慎的错误优先范式，实现ES8的async、await书写方式，将全局变量wx下的所有函数真正实现同步写法。 uniapp、Taro、各类小程序都已实现。

async function A() {
   // 获取系统信息
   const [ err, res ] = await wx.getSystemInfo.input()
   if (!err) {
   		console.log(res.model)
   		console.log(res.pixelRatio)
   }
   // 获取位置信息
   const [ errLoca, resLoca ] = wx.getLocation.input({type: 'wgs84'})
   if (!errLoca) {
   		console.log(resLoca)
   }
}

书写时注意：

1. wx上的所有函数都支持这种调用方式 wx[wxFunc].input()，原函数不直接调用，而是通过input调用，input内的参数即为原wxFunction的参数，一模一样，如果原函数没有入参，则input内也不入参。

2. 其它书写环境，替换成相应环境下的变量和方法即可。例如支付宝

   const [ err, res ] = my.getAuthUserInfo.input()

思考点：

🤔兼容性：都是支持的（es6默认是开启的，大家不关闭es6转译即可）

🤔侵入性：对原来代码不造成任何影响，对原函数也不造成任何影响。原来的代码都不用动，新写的可以用await-input的这种书写方式，也可以接着用wx原生的书写方式，完全OK。

下面看一下书写方式的前后对比

例如：在initInfo函数内执行一些初始化信息

传统书写方式

initInfo() {
		wx.getSystemInfo({
        success (res) {
          console.log(res.model)
          console.log(res.pixelRatio)
          wx.login({
              success: res => {
                wx.request({
                    url: this.globalData.HttpUrl + 'wxmini/login?auth_code=' + res.code,
                    success: (res) => {
                        console.log(res)
                        wx.getSystemInfo({
                            success:(res) => {
                                // 这里有一些信息逻辑
                                // balabalabala
                                // balabalabalabala
                                wx.getLocation({
                                    type: 'wgs84',
                                    success:(res)=> {
                                        const latitude = res.latitude
                                        const longitude = res.longitude
                                        /* 设置缓存 */
                                        wx.setStorageSync('lonlat',longitude+latitude);
                                    },
                                    fail(err) {
                                        // balabalabalabala
                                        // balabalabalabala
                                    }
                                })
                            },
                            fail(err) {
                                console.log(err)
                            }
                        })
                    },
                    fail(err) {
                        console.log(err)
                    }
                })
              },
              fail(err) {
                  console.log(err)
              }
          })
      },
      fail(err) {
        console.log(err)
      }
    })
}

引入await-input包之后的写法，实现了

1.从上到下，依次书写；

2.fail错误和正确结果，并行捕捉；

3.直接处理错误，避免遗漏引发的白屏等现象。

引入await-input后的书写方式

async initInfo() {
    const [ errInfo, resInfo ] = await wx.getSystemInfo.input()
    if (!errInfo) {
      console.log(resInfo.model)
      console.log(resInfo.pixelRatio)
    }
    const [ errLogin, resLogin ] = await wx.login.input();
    if (!errLogin) {
      console.log(resLogin)
    }
    const [ errRe, resRe ] = await wx.request.input({url: '', method: 'POST', data: {}});
    if (!errRe) {
      console.log(resRe)
    }
    const [ errLoca, resLoca ] = wx.getLocation({type: 'wgs84'})
    if (!errLoca) {
      console.log(resLoca)s
    }
}