小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝

這篇文章主要介紹了小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)樂清,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

1、背景

在做微信小程序開發(fā)的時(shí)候難免會(huì)涉及到網(wǎng)絡(luò)請(qǐng)求操作，小程序提供的原生網(wǎng)絡(luò)請(qǐng)求的api如下所示：

wx.request({
  url: 'https://test.com/******', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

其中：

url：為請(qǐng)求的后臺(tái)接口地址；
data：為請(qǐng)求接口需要攜帶的參數(shù)；
header：設(shè)置請(qǐng)求的 header，content-type 默認(rèn)為 application/json，
success：為請(qǐng)求成功后的回調(diào)，res包含請(qǐng)求成功后返回的數(shù)據(jù)。

更多關(guān)于 wx.request的用法可以查看官方介紹。
RequestTask | 微信開放文檔

那既然官方已經(jīng)提供有api，為什么還需要進(jìn)行二次封裝呢？

2、二次封裝的原因

第一點(diǎn)、避免重復(fù)代碼

避免重復(fù)代碼主要體現(xiàn)在以下幾點(diǎn)：

1）我們公司調(diào)用后臺(tái)接口，除了登錄接口外，其它的接口請(qǐng)求都需要在請(qǐng)求頭中加入token，如果不做封裝的情況下，每次調(diào)用網(wǎng)絡(luò)請(qǐng)求都需要傳token，很麻煩。

2）在網(wǎng)絡(luò)請(qǐng)求的時(shí)候往往需要給個(gè)加載框，提示用戶正在加載.... 如下圖所示：

小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝

請(qǐng)求結(jié)束的時(shí)候，隱藏加載框：

小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝

第二點(diǎn)、避免回調(diào)地獄

一個(gè)頁(yè)面如果有多個(gè)網(wǎng)絡(luò)請(qǐng)求，并且請(qǐng)求有一定的順序，wx.request 是異步操作，那么最直接的結(jié)果就如下所示代碼：

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
              }
            })
          }
        })
      }
    })
  },

是不是很像俄羅斯套娃。

為了避免這種寫法，當(dāng)然進(jìn)行封裝了，在這個(gè)地方采用了Promise。

關(guān)于Prolise的介紹可以到廖雪峰的官方網(wǎng)站去查看，有詳細(xì)的介紹。
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

3、具體的封裝實(shí)現(xiàn)

工程結(jié)構(gòu)：

小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝

在utils文件夾下新建了兩個(gè)文件。

1） httpUtils.js

網(wǎng)絡(luò)請(qǐng)求的封裝，具體代碼如下：

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


/**
 * 網(wǎng)絡(luò)請(qǐng)求request
 * obj.data 請(qǐng)求接口需要傳遞的數(shù)據(jù)
 * obj.showLoading 控制是否顯示加載Loading 默認(rèn)為false不顯示
 * obj.contentType 默認(rèn)為 application/json
 * obj.method 請(qǐng)求的方法  默認(rèn)為GET
 * obj.url 請(qǐng)求的接口路徑 
 * obj.message 加載數(shù)據(jù)提示語(yǔ)
 */
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,
        //添加請(qǐng)求頭
        header: {
          'Content-Type': contentType ,
          'token': wx.getStorageSync('token') //獲取保存的token
        },
        //請(qǐng)求成功
        success: function(res) {
          console.log('===============================================================================================')
          console.log('==    接口地址：' + obj.url);
          console.log('==    接口參數(shù)：' + JSON.stringify(data));
          console.log('==    請(qǐng)求類型：' + method);
          console.log("==    接口狀態(tài)：" + res.statusCode);
          console.log("==    接口數(shù)據(jù)：" + JSON.stringify(res.data));
          console.log('===============================================================================================')
          if (res.statusCode == 200) {
            resolve(res);
          } else if (res.statusCode == 401) {//授權(quán)失效
            reject("登錄已過期");
            jumpToLogin();//跳轉(zhuǎn)到登錄頁(yè)
          } else {
            //請(qǐng)求失敗
            reject("請(qǐng)求失?。?quot; + res.statusCode)
          }
        },
        fail: function(err) {
          //服務(wù)器連接異常
          console.log('===============================================================================================')
          console.log('==    接口地址：' + url)
          console.log('==    接口參數(shù)：' + JSON.stringify(data))
          console.log('==    請(qǐng)求類型：' + method)
          console.log("==    服務(wù)器連接異常")
          console.log('===============================================================================================')
          reject("服務(wù)器連接異常，請(qǐng)檢查網(wǎng)絡(luò)再試");
        },
        complete: function() {
          ui.hideLoading();
        }
      })
    });
  }
  

  //跳轉(zhuǎn)到登錄頁(yè)
  function jumpToLogin(){
    wx.reLaunch({
      url: '/pages/login/login',
    })
  }
  
  module.exports = {
    request,
  }

代碼中有詳細(xì)的注釋，在這里就不多做解釋了。

2） ui.js

主要是對(duì)wx UI操作的一些簡(jiǎn)單封裝，代碼如下：

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）具體調(diào)用

在index.js 進(jìn)行了網(wǎng)絡(luò)請(qǐng)求，具體代碼如下：

// index.js
const httpUtils = require('../../utils/httpUtils')
const ui = require('../../utils/ui')

Page({
  data: {
    str:null,
  },

  onLoad() {
  },

  //獲取接口數(shù)據(jù)
  getNetInfo(){
    let obj = {
      method: "POST",
      showLoading: true,
      url:`/user/register?username=pppooo11&password=pppooo&repassword=pppooo`,
      message:"正在注冊(cè)..."
    }
    httpUtils.request(obj).then(res=>{
      this.setData({
        str:JSON.stringify(res)
      })
      ui.showToast(res.data.errorMsg)
    }).catch(err=>{
      console.log('ERROR')
    });
  }
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝
地址分享：http://bm7419.com/article24/jjseje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、域名注冊(cè)、微信公眾號(hào)、微信小程序、靜態(tài)網(wǎng)站、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

小程序中如何對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行二次封裝

1、背景

2、二次封裝的原因

3、具體的封裝實(shí)現(xiàn)

1、背景

3、具體的封裝實(shí)現(xiàn)