小程式中怎麼對網路請求進行二次封裝

這篇文章跟大家介紹一下微信小程式開發中的網路請求封裝，聊聊二次封裝的原因，具體的封裝實現，希望對大家有幫助！

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的用法可以查看官方介紹。

RequestTask | 微信開放文件

那麼既然官方已經提供有api，為什麼還需要進行二次封裝呢？

2、二次封裝的原因

第一點、避免重複程式碼

避免重複程式碼主要體現在以下幾點：

1） 我們公司呼叫後台接口，除了登入接口外，其它的接口請求都需要在請求頭中加入token，如果不做封裝的情況下，每次呼叫網路請求都需要傳token，很麻煩。

2）在網路請求的時候往往需要給個載入框，提示使用者正在載入.... 如下圖所示：

如果不做封裝，在每個網路要求的地方如果需要彈出載入框，都需要重複寫這一段程式碼：

#請求開始的時候，顯示載入框。

 請求結束的時候，隱藏載入框：

第二點、避免回呼地獄

一個頁面如果有多個網路請求，並且請求有一定的順序，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。

關於Prolise的介紹可以到廖雪峰的官方網站去查看，有詳細的介紹。

https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

#3、具體的封裝實作

##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上面，有興趣的可以點擊下載。

https://github.com/YMAndroid/NetWorkDemo

#更多程式相關知識，請造訪：###程式設計入門###！ ！ ###

以上是小程式中怎麼對網路請求進行二次封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！