微信小程序表单那些事

最近在开发一个微信小程序修改昵称功能时候遇到一个问题，修改昵称之后再次查看，还是修改之前的昵称，好在最终爬出深坑，特此记录一下原因，希望各位开发者能够提前避坑。

先贴出代码如下：

onBlur (e) {
    let value = e.detail.value.replace(/\s/g, '')
    if (value.length > 200 || value.length < 2) {
      this.setData({
        isError: true,
        nickName: value
      })
      wx.showToast({
        title: '请输入正确的昵称',
        icon: 'none'
      })
      return
    }
    this.setData({
      nickName: value
    })
  },
  // 用户头像昵称修改，保存
  editHeadUrl () {
    wx.showLoading()
    return new Promise((resolve, reject) => {
      HTTP('user/wtdf/json/application/editHeadUrl', {
        openId: wx.getStorageSync('openid'),
        newNickName: this.data.nickName,
        type: 2,
        base64Str: this.data.avatarBase64
      }).then(res => {
        wx.hideLoading()
        if (res.resultCode == 0) {
          this.setData({
            successPopIsShow: true
          })
          this.countDownHandler()
        }
        resolve()
      }).catch(err => {
        reject(err)
      })
    })
  },

因为我是在input失去焦点的时候给昵称赋值，然后点击按钮进行提交，通过开发者工具测试，功能正常，可以进行修改操作，但在真机测试是发现修改无效，最终定位原因是由于点击按钮时，输入框还未失去焦点，故获取的还是原值，所以修改失败，最终解决办法为，在点击提交时通过延时调用的形式进行修改操作，最终问题得以解决。以下为具体代码：

// 用户头像昵称修改，保存
  editHeadUrl () {
    wx.showLoading()
    setTimeout(() => {
      return new Promise((resolve, reject) => {
        HTTP('user/wtdf/json/application/editHeadUrl', {
          openId: wx.getStorageSync('openid'),
          newNickName: this.data.nickName,
          type: 2,
          base64Str: this.data.avatarBase64
        }).then(res => {
          wx.hideLoading()
          if (res.resultCode == 0) {
            this.setData({
              successPopIsShow: true
            })
            this.countDownHandler()
          }
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    }, 100)
  },

以上思路仅供参考，如有更好的办法，欢迎回帖，作者将万分感谢！！