小程序封裝wx.request請求並建立接口管理文件

開發小程序，封裝有一個簡單易用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