乐趣区

关于微信小程序:微信小程序开发网络请求封装

jiezi

1、背景

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

wx.request({
  url: 'https://test.com/******', // 仅为示例，并非实在的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {'content-type': 'application/json' // 默认值},
  success (res) {console.log(res.data)
  }
})

其中 url：为申请的后盾接口地址；
        data：为申请接口须要携带的参数；
        header：设置申请的 header，content-type 默认为 application/json，
        success：为申请胜利后的回调，res 蕴含申请胜利后返回的数据。

更多对于 wx.request 的用法能够查看官网介绍。
小程序官网 api 文档
那既然官网曾经提供有 api，为什么还须要进行二次封装呢？

2、二次封装的起因

第一点、防止反复代码

防止反复代码次要体现在以下几点：
1）咱们公司调用后盾接口，除了登录接口外，其它的接口申请都须要在申请头中退出 token，如果不做封装的状况下，每次调用网络申请都须要传 token，很麻烦。
2）在网络申请的时候往往须要给个加载框，提醒用户正在加载 …. 如下图所示：
  
如果不做封装，在每个网络申请的中央如果须要弹出加载框，都须要反复写这一段代码：
申请开始的时候，显示加载框。

    wx.showLoading({title: message,}),

 申请完结的时候，暗藏加载框：
wx.hideLoading();

第二点、防止回调天堂
一个页面如果有多个网络申请，并且申请有肯定的程序，wx.request 是异步操作，那么最间接的后果就如下所示代码：

onLoad: function () {
    wx.request({
      url: 'https://test.com/api/test01',
      success:res=>{
        wx.request({
          url: 'https://test.com/api/test02',
          success: res=>{
            wx.request({
              url: 'https://test.com/api/test03',
              success: res=>{testDataList: res.content}
            })
          }
        })
      }
    })
  },

是不是很像俄罗斯套娃。
为了防止这种写法，当然进行封装了，在这个中央用到了 Promise。
对于 Promise 的介绍能够到廖雪峰的官方网站去查看，有具体的介绍。
Promise 介绍

3、具体的封装实现

工程构造：

 在 utils 文件夹下新建了两个文件。
1) httpUtils.js
网络申请的封装，具体代码如下：

const ui = require('./ui');
const BASE_URL = 'https://www.wanandroid.com'


/**
 * 网络申请 request
 * obj.data 申请接口须要传递的数据
 * obj.showLoading 管制是否显示加载 Loading 默认为 false 不显示
 * obj.contentType 默认为 application/json
 * obj.method 申请的办法  默认为 GET
 * obj.url 申请的接口门路 
 * obj.message 加载数据提醒语
 */
function 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.js
const 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')
    });
  }
})

好了，到这里也就完结了，如果下面的内容对你有所帮忙不要遗记点个赞哟。
代码曾经上传到了 github 下面，感兴趣的能够点击下载。
网络封装源码

备注

往期历史文章：
微信小程序开发 – 个性化头像生成(国庆突变头像、圣诞帽头像)

退出移动版