關於對小程式網路請求的封裝(詳盡版)

致愛麗絲發表於2020-05-18
封裝

引導讀者從最基礎的小程式網路請求封裝到網路請求封裝的最優解

在使用原生小程式網路api時，有以下兩個缺點：

  1. 多個頁面往往代表傳送多個網路請求，這樣對伺服器的壓力過大 -> 降壓
  2. 基於原因1，防止未來微信官方廢棄了wx.request這個api而換了另外一個api時造成的重複操作 ->降低依賴,防止重複

1. wx原生網路請求

微信原生請求看似很清晰，但成功與失敗的函式都是在 wx.request內部，假設讀者對jQuery有所瞭解，就會發覺跟jquery很像：

但這種方法已經瀕臨滅絕了，接下來使用基於promise對微信原生網路請求進行層層封裝

2. 簡單封裝

//  ../../request/one.js
export default function reqeust(params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: params.url,
      method: params.method || 'get',
      data: params.data || {},
      success: res => {
        resolve(res)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

如果對pomise相當瞭解,也可以使用進化版:

//  ../../request/one.js
export default function reqeust(params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: params.url,
      method: params.method || 'get',
      data: params.data || {},
      success: resolve,
      fail: reject
    })
  })
}

頁面內使用:

//頁面內匯入
 import reqeust from '../../request/one.js'
// 頁面的onload函式內使用
  onLoad: function () {
    reqeust({
      url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxx',
    })
      .then(res => {
      console.log(res)
    })
      .catch(err => console.log(err))
  }

結果也是一樣的

3. 進化版封裝

回顧下es6的匯入匯出知識:

// 常量的匯出
//public.js
const demo = '使用export匯出的常量,不可以重新命名該常量,需要用大括號';
export {
  demo 
}
//常量的匯入
//getdemo.js
import { demo } from './public'
console.log(demo ) // '使用export匯出的常量,不可以重新命名該常量,需要用大括號'
//函式的匯出與匯入
//函式的匯出
//fn.js
export function fn() {
  console.log("使用export匯出的fn,不可以重新命名該函式,需要用大括號")
}
//函式的匯入
//getFn.js
import { fn } from './fn.js'
fn(); // "使用export匯出的fn,不可以重新命名該函式,需要用大括號"

//全部匯出與匯入
//匯出
//allData.js
export default function allData() {
console.log("使用export default 匯出的資料,可以重新命名該函式,不需要用大括號")
}
//getAllData.js
//匯入
 import reName_AllData from './allData.js'
reName_AllData()//"使用export default 匯出的資料,可以重新命名該函式,不需要用大括號"

假設請求的url有一部分是相同的

  • 將url分為兩部分:第一部分作為公共的請求地址publicURL,單獨抽離成一個檔案,另一部分作為單個頁面請求的網路地址PageUrl
  • 在requers.js裡將公共的請求地址publicURL新增進url裡
  • 頁面匯入request.js 發起請求
//抽取公共url到單獨檔案
//publicData.js
const baseURL = 'https://jiazhuang/zheshi/yige/gonggongurl';
export {
  baseURL
}
//封裝的網路請求檔案,匯入上述檔案
//network1-0.js
import { baseURL } from './public'
export function request(params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + params.url,
      method: params.method || 'get',
      data: params.data || {},
      success: resolve,
      fail: reject
    });
  })
}
//頁面使用時僅填入對應的網路地址即可
//頁面匯入封裝好的network1-0.js
import { request } from '../../req/newwork1-5'
//onLoad函式內使用
 onLoad: function () {
    request({
      url: 'public/v1/home/swiperdata'
    }).then(res => {
      console.log(res)
    })
      .catch(err => console.log(err))
  }

以上就是第二層封裝.

但是這樣還是有不太方便的一面:
單個頁面需要傳送的請求太多,程式碼的可讀性並不太好
那麼就有了終極版封裝:

4. 進化版封裝

這一步時,我們的目的就是為了分層:

基於頁面分層,封裝單個頁面需要傳送的請求為一個檔案getPage.js由page.js負責向request.js傳送真正的網路請求,而頁面要做的就是呼叫page.js裡的單個請求方法
以下為圖示:

解釋:

  1. request.js負責將公共api與getPage.js裡傳入的api進行拼接,整合後向後臺傳送資料
  2. getPage.js向上負責向request.js傳送請求,向下作為傳送請求函式等待被呼叫,函式內部儲存非公共api
  3. page作為頁面,僅呼叫getPage.js內部的函式即可

整演示例

//publicData.js 作為api的公共部分
 const baseUrl= 'https://jiazhuang-shiyige-api/api/';
export {
  baseUrl
}

//request.js 作為真正傳送網路請求的檔案
import { publicUrl } from './publicData'
export default function reqeust(params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: publicUrl + params.url,
      method: params.method || 'get',
      data: params.data || {},
      success: resolve,
      fail: reject
    })
  })
}

// getIndexData.js : 向上負責呼叫request.js,向下負責該page頁面的傳送網路請求的所有函式,函式的內部儲存了非公共部分的請求地址
import reqeust from './request'
export function getBannerData() {
  return reqeust({
    url: 'wo/zhen-de/shi/api/banner',
  })
}
//index頁面匯入所屬的getIndexData.js,在onload函式內呼叫所屬頁面的方法
import { getBannerData} from '../../request/getIndexData'
onload(){
  getBannerData().then(res => {
      console.log(res)
      //這裡就可以對資料進行操作了
    }).catch(err => console.log(err))
}

在這個例子裡,一步步解釋了流程,或許有些冗餘,但這些更符合了規範化,page頁面不關心傳送網路請求,只負責呼叫,getPageData.js只負責將對應的url傳送給request.js處理,而request.js負責拼接整合url以及其他,最終傳送向網路請求.如果願意,還可以單個頁面再細分,所作的一切都是為了服務於開發.

以上就是將小程式的原生網路請求一步步封裝達到最優解.

相關文章