微信小程序wx.request的简单封装

前言

之前写小程序，每次请求后台时都直接调用原生的API，wx.request，每次都要写url，data，回调函数等，正好前段时间，小程序项目需要添加新内容，趁此机会，做一个封装的请求工具，比较简单。

本文若有出入，请指正——来自小渣渣的颤抖

客官可移步小站看本文http://fanjiajia.cn/2019/07/06/wxxcx/flx1/

原生的API

首先看看原生的api，wx.request需要写如下东西：

wx.request({

      url: '', // url地址

      // 参数

      data:{ 

      },

      method:'', // post || get

      success: res=> {

      // 请求成功回调函数，res为回调参数

      },

      fail:res=> {

        // 请求失败回调函数，res为回调参数

      }

    })

每次网络请求都需要写这些内容，其实在实际项目中，大多情况下url都是由基地址+请求模块构成，比如https://woshigecainiao.com/myservice/login，这里基地址为：https://woshigecainiao.com/myservice/，模块为/login。基地址一般都不会变，method通常也是约定好的，一律post或者get等，fail回调一般都会统一处理，所以不同的是参数data，和请求成功后的处理。

实现

在util目录下新建NetAPI.js

const config = require ("../config.js") // 域名配置等

const request = (url, data, showLoading) => {

  let _url = config.baseurl + url;

  return new Promise((resolve, reject)=> {

    // 由调用者控制是否需要显示加载对话框

    if (showLoading){

      wx.showLoading({

        title: '加载中',

        mask: true

      })

    }

    wx.request({

      url: _url,

      method: 'post',

      data: data,

      success(res) {

        // console.error(res)

        wx.hideLoading();

        resolve(res.data)

      },

      fail(err) {

        console.error('网络请求失败',err)

        wx.hideLoading();

        wx.showModal({

          title: '提示',

          content: '网络请求失败',

          showCancel: false

        })

      }

    })

  })

}

module.exports = {

  // 此处调用可直接使用NetAPI.VehicleResManager(data).then(...)，第二个参数showLoading采用缺省，即默认使用加载，调用给false，即可屏蔽默认的加载框，js不支持方法重载，也是没办法

  VehicleResManager: (data, showLoading) => {

    return request(config.CLYYQuery, data, showLoading == undefined ? true : showLoading)

  }

}

这里我导入了config.js文件，其中配置了后台服务器的ip和后台请求基地址和请求模块地址等，这样便于统一管理，只需要在config中配置，NetAPI中调用即可，NetAPI中不关心具体的url。

const request = (url, data, showLoading) => {...}

url：后台不同模块的入口，比如login等这样的模块
data：请求所需要的参数data
showLoading：发起网络请求是否需要显示加载对话框的控制开关

以我这里的例子为例，我最后暴露除了VehicleResManager,即车辆预约管理模块，所对应了后台模块地址卸载config中config.CLYYQuery，这样，在page的js中只需要简单的调用暴露的相关入口即可。

调用

在某个page中首先导入该工具

const NetAPI = require('../../utils/NetAPI.js')

调用处：

NetAPI.VehicleResManager(data, that.data.curPage == 0).then(res => {...}

res即为请求返回数据，不包含网络状态等，因为在工具中resolve(res.data)中直接返回的是返回体的data部分。

这里关于Promise就不说了

最后

此致，敬礼

巴特西

微信小程序wx.request的简单封装

前言

原生的API

实现

在util目录下新建NetAPI.js

调用

最后

最新文章

热门文章