微信小程序封装网络请求以及回调函数

  • 背景：需要从本地取登录的token访问数据，以及请求写域名很麻烦将其封装方便使用

一、封装基础讲解

主要模仿微信小程序自带函数方法形式调用。将js函数封装，参数使用json。输入使用的参数及函数名称。以取本地token封装为例：

1、获取userid

// 获取常用信息==================
//获取userid
//back为回调方法  失败返回false 成功返回userid
function getUserId(data) {
    wx.getStorage({
        key: getUserKey(),//'userInfo',
        fail:function(res) {
            data.back(false);
        //    return false;
        },
        success: function(res) {
            var userData = res.data;
            console.log(userData);
            data.back(userData.usrid);
            // return userData.usrid;
          } 
    });
}

使用方法ps：传参数是json对象

var Data = require('../../utils/data.js');
 Data.getUserId({
      back:function(data){
        console.log(data);
        if(!data){return;}
        var param = {'userId':data};
        Data.postData({
          url:'//userapp/user/getInfoByUserId',
          param:param,
          back:function(data) {
            console.log(data);
          }
        });
      }
    });

2、请求封装

请求失败返回false成功返回json数据解析，内部包含了通用的逻辑判断，以及全局ip的包括方便修改ip。

//post===============
//url==网址 ,param===参数,back===返回的函数
function postData(data) {
    var url = data.url;
    var param = data.param;
    var back = data.back;
    console.log(url+'++++'+param.userId);
    wx.request({
      url: getUrl()+url,
      data: param,
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
     complete: function(res) {
             wx.hideLoading();
    },
     fail: function(res) {
         wx.showToast({
                title: '请求错误',
                icon: 'error',
                mask: true,
            });
        back(false);
    },
    success: function(res) {
        console.log(res);
        wx.hideLoading();
        if(res.data.status==500){
            wx.showToast({
                title: '请求成功',
                icon: 'success',
                mask: true,
            });
            back(res.data.data);
            return;
        }else if(res.data.length>0){
            wx.showToast({
                title: res.data.data,
                icon: 'error',
                mask: true,
            });
        }
        back(false);
    }
 })
}
//get===============
//url==网址 ,param===参数,back===返回的函数
function getData(data) {
    var url = data.url;
    var param = data.param;
    var back = data.back;
    console.log(url+'++++'+param);
    wx.request({
      url: getUrl()+url,
      data: param,
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      
      success: function(res) {
        console.log(res);
        wx.hideLoading();
        if(res.data.status==500){
            wx.showToast({
                title: '请求成功',
                icon: 'success',
                mask: true,
            });
            back(res.data.data);
        }else {
            wx.showToast({
                title: res.data.data,
                icon: 'error',
                mask: true,
            });
        }
        // return res.data.data;
        back(false);
    },
      fail: function(res) {
        // fail
        back(false);
      },
      complete: function(res) {
        // complete
         wx.hideLoading();
      }
    })
}

二、全部代码及讲解

使用方法代码，注意需要引入全局js（var Data = require('../../utils/data.js');）才能使用，方法需要暴露在外部。

var Data = require('../../utils/data.js');
// 请求数据
  initData: function() {
    Data.getUserId({
      back:function(data){
        console.log(data);
        if(!data){return;}
        var param = {'userId':data};
        Data.postData({
          url:'//userapp/user/getInfoByUserId',
          param:param,
          back:function(data) {
            console.log(data);
          }
        });
      }
    });
   
  },

通用js的代码，内部包含了常用数据保存的key，全局的ip，常用的请求方法包装。主要方法在外部调用需要module.exports = {}。使用的时候参数设计的是json为了符合微信小程序的代码风格。

//提供接口
module.exports = {
    getUserKey : getUserKey,//保存登录的用户信息
    getOpenPwKey : getOpenPwKey,//保存开门的钥匙
    getUrl:getUrl,//host接口
    postData:postData,
    getData:getData,
    getUserId:getUserId,
    getUser:getUser
}

//post===============
//url==网址 ,param===参数,back===返回的函数
function postData(data) {
    var url = data.url;
    var param = data.param;
    var back = data.back;
    console.log(url+'++++'+param.userId);
    wx.request({
      url: getUrl()+url,
      data: param,
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
     complete: function(res) {
             wx.hideLoading();
    },
     fail: function(res) {
         wx.showToast({
                title: '请求错误',
                icon: 'error',
                mask: true,
            });
        back(false);
    },
    success: function(res) {
        console.log(res);
        wx.hideLoading();
        if(res.data.status==500){
            wx.showToast({
                title: '请求成功',
                icon: 'success',
                mask: true,
            });
            back(res.data.data);
            return;
        }else if(res.data.length>0){
            wx.showToast({
                title: res.data.data,
                icon: 'error',
                mask: true,
            });
        }
        back(false);
    }
 })
}
//get===============
//url==网址 ,param===参数,back===返回的函数
function getData(data) {
    var url = data.url;
    var param = data.param;
    var back = data.back;
    console.log(url+'++++'+param);
    wx.request({
      url: getUrl()+url,
      data: param,
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      
      success: function(res) {
        console.log(res);
        wx.hideLoading();
        if(res.data.status==500){
            wx.showToast({
                title: '请求成功',
                icon: 'success',
                mask: true,
            });
            back(res.data.data);
        }else {
            wx.showToast({
                title: res.data.data,
                icon: 'error',
                mask: true,
            });
        }
        // return res.data.data;
        back(false);
    },
      fail: function(res) {
        // fail
        back(false);
      },
      complete: function(res) {
        // complete
         wx.hideLoading();
      }
    })
}


//接口URL==============
function getUrl(){
    return "http://120.55.117.108:8989";
}

// 获取常用信息==================
//获取userid
function getUserId(data) {
    wx.getStorage({
        key: getUserKey(),//'userInfo',
        fail:function(res) {
            data.back(false);
        //    return false;
        },
        success: function(res) {
            var userData = res.data;
            console.log(userData);
            data.back(userData.usrid);
            // return userData.usrid;
          } 
    });
}
//获取user的登录信息
function getUser(data) {
    wx.getStorage({
        key: getUserKey(),//'userInfo',
        fail:function(res) {
             data.back(false);
        //    return false;
        },
        success: function(res) {
            var userData = res.data;
            console.log(userData);
             data.back(userData);
            // return userData;
          } 
    });
}


//本地保存数据的key==============
//保存登录的用户信息
function getUserKey(){
    return "userInfo";
}
//保存开门的钥匙
function getOpenPwKey() {
    return "openpw";
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS网络架构文档整理
    iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的，毕竟多个单...
    yhtang阅读 10,667评论 1赞 23
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,831评论 25赞 709
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,773评论 19赞 139
  • 仲夏夜做的仲夏夜之梦
    菜鸟又来播报音乐赏听会听后感了。 方圆老师还是一如既往的幽默犀利，叶子的解读帮助大家了解了作品和背景，跟方圆老师两...
    urna阅读 2,934评论 0赞 0
  • 《曾国藩的正面与侧面》第一章2016.11.27
    曾国藩从愤青到手腕圆融的官员，他经历了五次大的挫折，大的羞辱。父亲去逝时，皇帝借机剥夺他的权利将他遣回家中，看着自...
    Kylekyle阅读 2,985评论 0赞 0