小程序实例回顾分析--数据交互链条设计

与服务端协商好参数存在二级对象时的处理方式,这里是直接转字符串

  for (let key in data) {
    if (data[key] !== '') {
      if (typeof data[key] === 'object') {
          data[key]= JSON.stringify(data[key])
      }
    }
  }
    

这里可以添加全局参数,授权信息添加到所有接口中。

按照更合理的思路,授权信息如token,应该是放到headers中,这样能与请求参数区分开来。但是根据服务端的要求,做了调整,全都放到了data中。这时候只需要全局添加就可以了。

app是入口文件的app.js,这里允许配置全局参数。

    
  if (app.globalData.userInfo.token){
      data.token = app.globalData.userInfo.token
  }
  if (app.globalData.userInfo.userid){
      data.user_id = app.globalData.userInfo.userid
  }
  if (app.globalData.userInfo.mobile){
      data.mobile = app.globalData.userInfo.mobile
  }
  if (app.globalData.userInfo.openid){
      data.openid = app.globalData.userInfo.openid
  }

整个响应过程用的Promise,通过resolve和reject来处理正常和异常交互

    
  return new Promise((resolve, reject) => {
    
    })

对于wx.request,这个微信小程序提供的交互接口。

  • 1.请求地址必须是https,在开发工具中可以额外更改为不校验,但在正式版本必须是https
  • 2.配置https时,必须是pem,不使用crt
  • 3.失败的时候,用wx.showToast提示网络错误。经测试,wx.showToast的层级要高于地图组件和cover-view
    wx.request({
      url: url,
      method: 'POST',
      data: data,
      header: {
          'Content-Type': 'application/json'
      },
      success: function (res) {},
      fail: function (res) {
          console.log('请求返回数据', res)

          wx.showToast({
            title: '网络错误',
            image: '../../images/icons/ic_error.png',
            duration: 2000
          })

        reject('');
      }
    })

相应数据业务逻辑处理

  • 1.token过期,需要重新登录
    // 需要重新登录
    if (resData.err_code  === STATE_CODE.RE_LOGIN){
      wx.reLaunch({
          url:'/pages/Loading/Loading'
      })
      return
    }
        
  • 2.单点登录,已经在其他地方登录了,需要清除当前登录状态并重新登录
    // 需要退出登录并跳到登录接口
    if (resData.err_code  === STATE_CODE.SINGLE_LOGIN){
      app.globalData.userInfo.mobile = app.globalData.userInfo.openid = app.globalData.userInfo.userid = app.globalData.userInfo.token = ''
    
      wx.request({
          url: HTTP_URI.LOGOUT,
          method: 'POST',
          data: data,
          header: {
              'Content-Type': 'application/json'
          },
          success: function (res) {
              wx.reLaunch({
                  url:'/pages/Login/Login'
              })
          },
          fail: function (res) {
              wx.reLaunch({
                  url:'/pages/Login/Login'
              })
          }
      })
      return
    }
            
  • 3.前端业务逻辑需要单独判断处理返回code
    // 直接返回值
    if (param && param.useCode){
      resolve(resData);
    }
        
  • 4.正常统一处理
    // 直接返回值
    if (param && param.useCode){
      resolve(resData);
    }
    // 判断是否为错误码
    else {
      if (resData.err_code === STATE_CODE.ERROR_OK) {
          resolve(resData);
      } else {
          let errMsg = resData.err_msg || '请求错误'
          wx.hideLoading()
          reject(errMsg);
      }
    }
        
let app = getApp()
export const Fetch = function (url, data = {}, param) {
  for (let key in data) {
    if (data[key] !== '') {
      if (typeof data[key] === 'object') {
          data[key]= JSON.stringify(data[key])
      }
    }
  }
  if (app.globalData.userInfo.token){
      data.token = app.globalData.userInfo.token
  }
  if (app.globalData.userInfo.userid){
      data.user_id = app.globalData.userInfo.userid
  }
  if (app.globalData.userInfo.mobile){
      data.mobile = app.globalData.userInfo.mobile
  }
  if (app.globalData.userInfo.openid){
      data.openid = app.globalData.userInfo.openid
  }
  return new Promise((resolve, reject) => {
    console.log('请求数据', data, '接口', url)
    wx.request({
      url: url,
      method: 'POST',
      data: data,
      header: {
          'Content-Type': 'application/json'
      },
      success: function (res) {
          console.log('请求返回数据', res)
        let resData = res.data
          // 需要重新登录
          if (resData.err_code  === STATE_CODE.RE_LOGIN){
              wx.reLaunch({
                  url:'/pages/Loading/Loading'
              })
              return
          }

          // 需要退出登录并跳到登录接口
          if (resData.err_code  === STATE_CODE.SINGLE_LOGIN){
              app.globalData.userInfo.mobile = app.globalData.userInfo.openid = app.globalData.userInfo.userid = app.globalData.userInfo.token = ''

              wx.request({
                  url: HTTP_URI.LOGOUT,
                  method: 'POST',
                  data: data,
                  header: {
                      'Content-Type': 'application/json'
                  },
                  success: function (res) {
                      wx.reLaunch({
                          url:'/pages/Login/Login'
                      })
                  },
                  fail: function (res) {
                      wx.reLaunch({
                          url:'/pages/Login/Login'
                      })
                  }
              })
              return
          }



          // 直接返回值
          if (param && param.useCode){
              resolve(resData);
          }
          // 判断是否为错误码
          else {
              if (resData.err_code === STATE_CODE.ERROR_OK) {
                  resolve(resData);
              } else {
                  let errMsg = resData.err_msg || '请求错误'
                  wx.hideLoading()
                  reject(errMsg);
              }
          }
      },
      fail: function (res) {
          console.log('请求返回数据', res)

          wx.showToast({
            title: '网络错误',
            image: '../../images/icons/ic_error.png',
            duration: 2000
          })

        reject('');
      }
    })
  })
}

export const remoteHost = 'https:/aaaaa.com';

export const STATE_CODE = {
    ERROR_OK: 0,    // 交互正常
    RE_LOGIN:222,   // 重新获取token
    SINGLE_LOGIN:333, // 单点登录,其他地方已登录

    CODE_444: 444,  // 您的账户已冻结
    CODE_555: 555,  // 此车辆已锁定,请换其它车辆进行扫码
    CODE_666: 666,  // 借车失败
}
export const HTTP_URI = {
  'LOGIN': remoteHost + '/register/login',  // 登录
};

export const REQUEST_LIST = {
  // 登录
  LOGIN: function (data) {
    return Fetch(HTTP_URI.LOGIN, data)
  },

}

    
    let obj = {
        code: code,
        rawData: res.rawData,
        signature: res.signature,
        encryptedData: res.encryptedData,
        iv: res.iv,
        mobile: mobileNo,
        ver_code: _this.data.code
    }
    //发起网络请求
    wx.showLoading({
        title: '登录中',
    })

    REQUEST_LIST.LOGIN(obj).then(result => {
        wx.hideLoading()
        console.log(result);
        app.globalData.userInfo.token = result.token
        app.globalData.userInfo.userid = result.user_id
        app.globalData.userInfo.openid = result.openid
        app.globalData.userInfo.mobile = result.mobile

        wx.setStorageSync('token', result.token)
        wx.setStorageSync('userid', result.user_id)
        wx.setStorageSync('openid', result.openid)
        wx.setStorageSync('mobile', result.mobile)

        wx.reLaunch({
            url:'/pages/Map/Map'
        })
    }).catch(rej => {
        showTips({
            target: _this.selectComponent('#ma-tips'),
            content: rej
        })
    })

随机浏览