小程序如何封裝wx.request請求并創建接口管理文件

這篇文章主要為大家展示了“小程序如何封裝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

以上是“小程序如何封裝wx.request請求并創建接口管理文件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！