小程序入门(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.methodobject.dataTypeobject.responseTypeobject.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 就是传递过来的dataheader参数,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方法
希望对大家有所帮助!

大家可以关注我的微信公众号:「秦子帅」一个有质量、有态度的公众号!

公众号

推荐阅读更多精彩内容