小程式封裝wx.request請求並建立介面管理檔案

七劍下天山發表於2019-04-28
封裝

開發小程式，封裝有一個簡單易用wx.request請求還是很必要的，可以省去大量的維護成本！閒話不多說，直接擼程式碼。

流程

  • 建立http.js檔案，封裝wx.request
  • 建立api.js檔案，統一管理所有介面
  • 在index.js中呼叫介面

建立http.js檔案，封裝wx.request

在utils中建立http.js檔案，封裝http，程式碼如下：

module.exports = {
  http(url, method, params) {
    let token = 'token' // 獲取token，自行獲取token和簽名，token和簽名表示每個介面都要傳送的資料
    let sign = 'sign' // 獲取簽名
    let data = {
       token,
       sign
    }
    if(params.data){ // 在這裡判斷一下data是否存在，params表示前端需要傳遞的資料，params是一個物件，有三組鍵值對，data：表示請求要傳送的資料，success：成功的回撥，fail：失敗的回撥，這三個欄位可缺可無，其餘欄位會忽略
      for (let key in params.data) { // 在這裡判斷傳過來的引數值為null，就刪除這個屬性
        if (params.data[key] == null || params.data[key] == 'null') {
          delete params.data[key]
        }
      }
      data = {...data,...params.data}
    }
    wx.request({
      url:'https://www.apiopen.top'+url, // 就是拼接上字首,此介面域名是開放介面，可訪問
      method:method=='post'?'post':'get', // 判斷請求型別，除了值等於'post'外，其餘值均視作get
      data,
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        params.success&&params.success(res.data)
      },
      fail(err) {
        params.fail&&params.fail(err)
      }
    })
  }
}
複製程式碼

程式碼很簡單，需要說的是在邏輯程式碼中只需要傳遞params，而url和method在介面檔案中傳遞，方便統一管理

建立api.js檔案，統一管理所有介面

在utils下建立api.js檔案，作為介面管理檔案，程式碼如下：

// 在這裡面定義所有介面，一個檔案管理所有介面，易於維護
import {http} from './http'; // 引入剛剛封裝好的http模組，import屬於ES6的語法，微信開發者工具必須開啟ES6轉ES5選項

function femaleNameApi(params){ // 請求隨機古詩詞介面
  http('/femaleNameApi','get',params)  // 介面請求的路由地址以及請求方法在此處傳遞
}

// 每一個介面定義一個函式，然後暴露出去，供邏輯程式碼呼叫

function novelApi(params){ // 小說推薦介面
  http('/novelApi','get',params) 
}

export default { // 暴露介面
  femaleNameApi,
  novelApi
}
複製程式碼

用api.js檔案統一管理的好處就是，當介面更新後修改很方便，不需要看邏輯程式碼，也不用關心有幾處呼叫了此介面，直接在app.js中修改響應就行了，介面統一管理是非常有必要的

在index.js中呼叫介面

呼叫方式，程式碼如下

import http from '../utils/api' // 引入api介面管理檔案
Page({
  data: {
    femaleList:[]
  },
  onLoad: function () {
    http.femaleNameApi({ // 呼叫介面，傳入引數
      data:{
        page:1
      },
      success:res=>{
        console.log('介面請求成功',res)
        this.setData({
          femaleList:res.data
        })
      },
      fail:err=>{
        console.log(err)
      }
    })
  }
})

複製程式碼

引數傳入說明:

  • 為了和微信的API介面呼叫方式看起來一致，故採用了微信API的這種呼叫方式
  • 傳遞一個物件，物件有三組鍵值對，data：表示要傳送的資料，success：成功回撥，fail：失敗回撥
  • 三個鍵值對均可傳可不傳，其餘值會忽略，基本和微信API呼叫方式一致，減少了強迫症的煩惱

第一次在掘金上發文章，還請諸位前輩多多指教！

小程式程式碼片段放在github上了，歡迎issue

相關文章