小程序中如何对网络请求进行二次封装

这篇文章主要介绍了小程序中如何对网络请求进行二次封装，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

1、背景

在做微信小程序开发的时候难免会涉及到网络请求操作，小程序提供的原生网络请求的api如下所示：

wx.request({  url: 'https://test.comfunction request(obj) {    return new Promise(function(resolve, reject) {      if(obj.showLoading){        ui.showLoading(obj.message? obj.message : '加载中...');      }      var data = {};      if(obj.data) {        data = obj.data;      }      var contentType = 'application/JSON';      if(obj.contentType){        contentType = obj.contentType;      }         var method = 'GET';      if(obj.method){        method = obj.method;      }        wx.request({        url: BASE_URL + obj.url,        data: data,        method: method,        //添加请求头        header: {          'Content-Type': contentType ,          'token': wx.getStorageSync('token') //获取保存的token        },        //请求成功        success: function(res) {          console.log('===============================================================================================')          console.log('==    接口地址：' + obj.url);          console.log('==    接口参数：' + jsON.stringify(data));          console.log('==    请求类型：' + method);          console.log("==    接口状态：" + res.statusCode);          console.log("==    接口数据：" + JSON.stringify(res.data));          console.log('===============================================================================================')          if (res.statusCode == 200) {            resolve(res);          } else if (res.statusCode == 401) {//授权失效            reject("登录已过期");            jumpToLogin();//跳转到登录页          } else {            //请求失败            reject("请求失败：" + res.statusCode)          }        },        fail: function(err) {          //服务器连接异常          console.log('===============================================================================================')          console.log('==    接口地址：' + url)          console.log('==    接口参数：' + JSON.stringify(data))          console.log('==    请求类型：' + method)          console.log("==    服务器连接异常")          console.log('===============================================================================================')          reject("服务器连接异常，请检查网络再试");        },        complete: function() {          ui.hideLoading();        }      })    });  }    //跳转到登录页  function jumpToLogin(){    wx.reLaunch({      url: '/pages/login/login',    })  }    module.exports = {    request,  }

代码中有详细的注释，在这里就不多做解释了。

2） ui.js

主要是对wx UI操作的一些简单封装，代码如下：

export const showToast = function(content,duration) {    if(!duration) duration = 2000    wx.showToast({        title: content,        icon: 'none',        duration: duration,    })  }    var isshowLoading = false  export const showLoading = function(title) {    if(isShowLoading) return    wx.showLoading({        title: title?title:'',        mask:true,        success:()=>{            isShowLoading = true        }    })  }    export const hideLoading = function() {    if(!isShowLoading) return    isShowLoading = false    wx.hideLoading()  }

3） 具体调用

在index.js 进行了网络请求，具体代码如下：

// index.jsconst HttpUtils = require('../../utils/httpUtils')const ui = require('../../utils/ui')Page({  data: {    str:null,  },  onLoad() {  },  //获取接口数据  getNetInfo(){    let obj = {      method: "POST",      showLoading: true,      url:`/user/reGISter?username=pppooo11&passWord=pppooo&repassword=pppooo`,      message:"正在注册..."    }    httpUtils.request(obj).then(res=>{      this.setData({        str:JSON.stringify(res)      })      ui.showToast(res.data.errORMsg)    }).catch(err=>{      console.log('ERROR')    });  }})

感谢你能够认真阅读完这篇文章，希望小编分享的“小程序中如何对网络请求进行二次封装”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!