小程序入門(2)-簡單網絡框架封裝

前言

回顧：
小程序入門(1)-項目環境搭建

我們新建完項目後，比較棘手的問題：

• 對項目架構的認知
• JS，wxss ,wxml
• 網絡請求
  今天主要講一下 如何發起 HTTPS 網絡請求 ，並做簡單的封裝。

詳解

如何發起網絡請求？？

官方文檔已做了解釋：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

示例代碼：

wx.request({
  url: 'test.php', //僅爲示例，並非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

官方文檔中對參數，object.method ，object.dataType ，object.responseType，object.success 回調函數，都做了詳細的說明。

簡單封裝

我們可以在項目外層新建一個utils文件並新建api.js類，去封裝Request方法：

const wxRequest = (params, url) => {
  console.log("傳參---" + url+"------->" + JSON.stringify(params))
  console.log("method-----" + params.data.data.method)
  console.log("header-----" + JSON.stringify(params.data.header) )
  wx.request({
    url,
    method: params.data.data.method || 'POST',
    data: params.data.data || {},
    header: {
       Accept: 'application/json',
      'Content-Type': 'application/json',
      'Authorization': params.data.header ? params.data.header.token : ''
    },
    success(res) {
      console.log("statusCode-----" + res.statusCode)
    
      if (res.statusCode==200){
        
        if (params.success) {
          params.success(res);
        }
      }else{
        if (params.fail) {
          params.fail(res);
        }
      }
 
    },
    fail(res) {
      if (params.fail) {
        params.fail(res);
      }
    },
    complete(res) {
      if (params.complete) {
        params.complete(res);
      }
    },
  });
};

其中：

• params 就是傳遞過來的data與header參數，url指的是baseurl+接口拼接後的URL
• success中返回成功的回調要根據自己的公司規則走

然後再寫一個方法去調用 wxRequest：

// 編輯修改地址
const handleEditAddress = (params) => {
  wxRequest (params, `${apiURL}/member/userAddress/upUserAddress`);
};

這裏只是做個示例， 其中apiURL就是BaseUrl，它是在app.js中聲明的

之後在api.js聲明一個常量並指向apiURL

const apiURL = getApp().globalData.apiURL

最後協商module.exports，暴露此方法：

module.exports = {

  handleAddAddress

};

封裝後如何用？？？

在當前的你寫的pages/.js文件中：

• 聲明app.js對象，也就是指向文件路徑：

const api = require('../../utils/api.js');

• 根據自己公司接口文檔，聲明對象的參數，仿下面示例：

    //參數 
    const data = {
      data: {
        method: "POST",
        //手機號
        phone: this.data.userTel,
        //姓名
        userName: this.data.userName,
        address:this.data.userDetailsAddress,
        isDefault: isDefault,
        shareCode: app.globalData.invitationCode,
        province:"天津市",
        area:"武清區",
        city:"天津市",
        region:this.data.lastleafname,
        street: this.data.districName

      },
   //請求頭
      header: {
        token: wx.getStorageSync("token")
      }
    }

• 網絡請求

    api.handleAddAddress({
      data,
      success: (res) => {
   
        console.log(res)

      },
      fail: (res) => {
        console.log(res)
      }
    })

也可以根據自己的需求，更改或者添加其他的wxRequest方法
希望對大家有所幫助！

大家可以關注我的微信公衆號：「秦子帥」一個有質量、有態度的公衆號！