美文网首页
微信小程序请求封装

微信小程序请求封装

作者: haisonLIN | 来源:发表于2018-12-26 09:39 被阅读0次

    1.请求封装

    class request {
      constructor() {
        this._header = {}
      }
    
      /**
       * 设置统一的异常处理
       */
      setErrorHandler(handler) {
        this._errorHandler = handler;
      }
    
      /**
       * GET类型的网络请求
       */
      getRequest(url, data, header = this._header) {
        return this.requestAll(url, data, header, 'GET')
      }
    
      /**
       * DELETE类型的网络请求
       */
      deleteRequest(url, data, header = this._header) {
        return this.requestAll(url, data, header, 'DELETE')
      }
    
      /**
       * PUT类型的网络请求
       */
      putRequest(url, data, header = this._header) {
        return this.requestAll(url, data, header, 'PUT')
      }
    
      /**
       * POST类型的网络请求
       */
      postRequest(url, data, header = this._header) {
        return this.requestAll(url, data, header, 'POST')
      }
    
      /**
       * 网络请求
       */
      requestAll(url, data, header, method) {
        return new Promise((resolve, reject) => {
          wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            success: (res => {
              if (res.statusCode === 200) {
                //200: 服务端业务处理正常结束
                resolve(res)
              } else {
                //其它错误,提示用户错误信息
                if (this._errorHandler != null) {
                  //如果有统一的异常处理,就先调用统一异常处理函数对异常进行处理
                  this._errorHandler(res)
                }
                reject(res)
              }
            }),
            fail: (res => {
              if (this._errorHandler != null) {
                this._errorHandler(res)
              }
              reject(res)
            })
          })
        })
      }
    }
    
    export default request
    

    2.使用请求

    import request from './request.js'
    class agriknow {
      constructor() {
        this._baseUrl = 'http://www.****.com/account-service/api/',
        this._defaultHeader = {
            'content-Type': 'application/x-www-form-urlencoded'
          }
        this._defaultData = {
          systemType: "00",
          systemVersion: "iOS12.1"
        }
        this._request = new request
        this._request.setErrorHandler(this.errorHander)
      }
    
      /**
       * 统一的异常处理方法
       */
      errorHander(res) {
        console.error(res)
      }
    
      /**
       * 注册
       */
      setAndUpdatePwd(data) {
        return this._request.postRequest(this._baseUrl + 'user/{version}/setAndUpdatePwd', Object.assign(data, this._defaultData)).then(res => res.data)
      }
    }
    export default agriknow
    

    3.设置全局

    在app.js里引入

    import agriknow from './apis/agriknow.js'
    
    //app.js
    App({
      onLaunch: function () {
        // 展示本地存储能力
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
    
        // 是否存在sessionId
        const sessionId =  wx.getStorageSync('sessionId') || []
    
        // 登录
        wx.login({
          success: res => {
            var code = res.code;
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
            // if (code) {
            //   console.log('获取用户登录凭证:' + code);
            // } else {
            //   console.log('获取用户登录态失败:' + res.errMsg);
            // }
          }
        })
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
      },
        onLoad: function (options) {
        debugger
            // 页面初始化 options为页面跳转所带来的参数
            var that = this
            //登陆获取code
            wx.login({
                success: function (res) {
                    console.log(res.code)
                    //获取openid
                    that.getOpenId(res.code)
                }
            });
        },
        getOpenId: function (code) {
        debugger
            var that = this;
            wx.request({
                url: "https://api.weixin.qq.com/sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code=" + code + "&grant_type=authorization_code",
                data: {},
                method: 'GET',
                success: function (res) {
                    that.generateOrder(res.data.openid)
                },
                fail: function () {
                    // fail
                },
                complete: function () {
                    // complete
                }
            })
        },
        /**生成商户订单 */
        generateOrder: function (openid) {
            var that = this
            //统一支付
            wx.request({
                url: '后台路径',
                method: 'GET',
                data: {
                    gfee: '商品价钱',
                    gname: '商品名称',
                    openId:openid
                    //(商品价钱和商品名称根据自身需要是否传值,openid为必传)
        },
            success: function (res) {
                var pay = res.data
                //发起支付
                var timeStamp = pay[0].timeStamp;
                var packages = pay[0].package;
                var paySign = pay[0].paySign;
                var nonceStr = pay[0].nonceStr;
                var param = { "timeStamp": timeStamp, "package": packages, "paySign": paySign, "signType": "MD5", "nonceStr": nonceStr };
                that.pay(param)
            },
        })
        },
      /* 支付   */
        pay: function (param) {
            console.log("支付")
            console.log(param)
            wx.requestPayment({
                timeStamp: param.timeStamp,
                nonceStr: param.nonceStr,
                package: param.package,
                signType: param.signType,
                paySign: param.paySign,
                success: function (res) {
                    // success
                    wx.navigateBack({
                        delta: 1, // 回退前 delta(默认为1) 页面
                        success: function (res) {
                            wx.showToast({
                                title: '支付成功',
                                icon: 'success',
                                duration: 2000
                            })
                        },
                        fail: function () {
                            // fail
                        },
                        complete: function () {
                            // complete
                        }
                    })
                },
                fail: function (res) {
                    // fail
                },
                complete: function () {
                    // complete
                }
            })
        },
      globalData: {
        userInfo: null,
        // 客服电话
        phoneNumber: '4006301238'
      },
      agriknow:new agriknow()
    })
    

    相关文章

      网友评论

          本文标题:微信小程序请求封装

          本文链接:https://www.haomeiwen.com/subject/uyvclqtx.html