小程序入门(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方法
希望对大家有所帮助！