原生小程序上手准备，让你的效率直接翻倍

1. 接口请求

我们知道，小程序原生的接口请求形式是用wx.request实现的

wx.request({
  url: 'http://example.com/data',
  data: {},
  header: {},
  method: 'GET',
  dataType: 'json',
  responseType: 'text',
  success: function(res){},
  fail: function(res){},
  complete: function(res){}
})

每次调接口，都需要调用wx.request，有很多重复工作，且如果是某个逻辑需要多个接口顺序调用实现，那这种写法很容易造成回调地狱。如何解决？我的做法是用promise搞定，封装request方法如下：

/**
 * @description 封装统一的request方法，以promise形式请求
 * @param {*} options 配置参数，包括url,data,method等
 * @returns {Promise} 返回一个Promise对象
 */
export const request = function (options) {
  return new Promise((resolve,reject)=>{
    wx.request({
      ...options,
      success:function(res){
        if(res.statusCode == 200){
          resolve(res)
        }else{
          reject(res) 
        }
      },
      fail:function(err) {
        reject(err) 
      }
    })
  })
}

这种写法的好处是代码可读性好，可扩展性好，不同接口逻辑可以很方便地单独拆开。例如可以用下面的方法解决链式调用。其中xxx，yyy，zzz，uuu是不同的接口请求方法。

//链式调用
wx.showLoading({
title: '请稍候...',
})
xxx()
.then((res1) => {return yyy(res1.data)})
.then((res2) => {return zzz(res2.data)})
.then((res3) => {return uuu(res3.data)})
.finally(()=>{
wx.hideLoading()
})

为什么不封装baseUrl呢？是因为我目前的项目在一个模块中会调用很多不同域名的接口，所以baseUrl的封装意义不大。读者可以按需求自己封装。

2. 错误捕捉

由于我的项目需要增加用户行为埋点，就需要在很多地方调用接口，传递日志信息，包括接口调用成功或失败的信息。调用成功就不必说了，接口报错的时候，错误五花八门，有可能是http错误，有可能是网络错误，有可能是数据处理错误，因此拿到的错误信息并不确定，而js是单线程的，如果处理不当，会导致程序无法向下运行。因此我简单封装了一个调用失败后获取错误信息字符串的方法，复用了大概30几次，源码如下：

/** 
 * @description 获取错误字符串
 * @returns {string} 字符串格式的报错
 */ 
export function getErrorString(err){
  let errStr = ''
  if(typeof err === "string"){
    errStr = err
  }else{
    try {
      for (let i in err) {
        errStr = errStr  + String(err[i])
      }
    } catch (error) {
      errStr = String(error)
    }
  }
  return errStr
}

逻辑很简单，关键是提高效率。

3.错误提示

在接口报错或者其他原因导致的报错，在需要提示时，微信自带的提示代码量比较多，且需要手动调用，因此我封装了一个方法，调用时只需传入上文中的错误信息即可，源码如下：

/**
 * @description 创建报错弹框
 * @param {*} errStr 错误字符串
 * @param {*} title  弹框标题
 */
export function createErrorModal(errStr,title){
  let _title = title || '异常'
  wx.showToast({
    title: _title + errStr, // 提示的内容
    icon: "error", // 图标，默认success
    duration: 1000, // 提示的延迟时间，默认1000
    mask: true, // 是否显示透明蒙层，防止触摸穿透
  })
}

这里的errorStr表示报错内容，可以用第二条的getErrorString获取，title表示弹框标题，不传则默认为“异常”。

总结

本文主要介绍了原生小程序开发中，接口请求、错误捕捉、错误提示的封装方法，逻辑十分简单，但是亲测可以有效提高开发效率。希望对大家有所帮助。