美文网首页
微信小程序网络请求工具类封装

微信小程序网络请求工具类封装

作者: 旅行者归来 | 来源:发表于2020-06-11 21:01 被阅读0次

    1、定义接口及基础请求地址的文件config.js

    const config = {
      base_url: '替换成api接口请求地址',
    
      //登录接口
      userLogin: 'userLogin',
    };
    
    export {
      config
    };
    

    2、网络请求文件netUtils.js

    //导入模块使用相对路径,不能使用绝对路径
    import {config} from '../net/config.js';
    
    //定义错误码信息
    const tips = {
      1: "亲:小E迷路了,请等等我"
    };
    
    
    class HTTP {
    
      request(params) {
        if (!params.method) {
          params.method = "GET"
        }
        wx.request({
          url: config.base_url + params.url,
          method: params.method,
          data: params.data,
          header: {
            "content-type": "application/json"
          },
          success: (res) => {
            //网络状态码
            let statusCode = res.statusCode.toString();
            if (statusCode.startsWith('2')) {
              // 请求码
              let code = res.data.code;
              if (code == "0") { //请求成功
                params.success(res.data);
              } else { //请求失败
                this._showToas(res.data.msg);
              }
            } else {
              wx.showToast({
                title: "网络请求错误(" + statusCode + ")",
                icon: "none",
                duration: 1500,
                mask: false
              });
            }
          },
          fail: (res) => {
            wx.showToast({
              title: "网络异常,请检查网络连接!",
              icon: 'none',
              duration: 1500,
              mask: false
            });
          }
        });
      }
    
    
    
      //显示错误提示的方法,以_开始的方法为私有方法
      _showErrInfo(errCode) {
        if (!errCode) {
          errCode = 1;
        }
        wx.showToast({
          title: tips[errCode],
          icon: "none",
          duration: 2000,
          mask: false
        });
      }
    
      _showToas(msg){
        wx.showToast({
          title: msg,
          icon: "none",
          duration: 2000,
          mask: false
        });
      }
    }
    
    export {
      HTTP
    };
    

    3、按照page页面或贵司规则创建每个业务类的js文件

    // 登录业务model
    import {
      HTTP
    } from "../net/netUtils.js";
    import {
      config
    } from '../net/config.js';
    
    let app = getApp();
    
    class LoginModel extends HTTP {
    
      /**
       * 登录
       * @onCallback 回调函数
       * @usetType 用户角色
       * @params 请求参数
       */
      login(onCallback, usetType, params) {
         console.log("params", params);
          //开始请求接口进行登录
          this.request({
            url: config.userLogin,
            method: "POST",
            data: {
              name: params.name,
              tel: params.tel,
              isReplace: params.isReplace,
              replaceName: params.replaceName,
              replaceTel: params.replaceTel
            },
            success: (res) => {
              console.log("apires:", res);
              onCallback(res);
            }
          });
        }
      }
    }
    export {
      LoginModel
    };
    

    4、在pages对应的页面js文件中调用即可:
    如:

    // pages/customer/login/login.js
    import {
      LoginModel
    } from '../../../mdoels/LoginModel.js';
    
    let loginModel = new LoginModel();
    let app = getApp();
    
    
    
     login: function(e) {
        let object = e.detail.value;
        console.log('from表单携带数据为:', object);
        loginModel.login((res) => {
          //用户登录成功后将用户数据进行本地缓存
          wx.setStorage({
            key: "userData",
            data: res.data
          });
        }, 1, object);
      },
    

    相关文章

      网友评论

          本文标题:微信小程序网络请求工具类封装

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