小程序请求API接口，网络请求封装

概述

前几日关注的用户问我有没有封装好的小程序网络请求接口，那么小程序请求API接口，网络请求封装,我们应该怎么编写呢？

今天我们说下小程序请求API接口的实现，然后就分享这样的小案例。希望对大家有所帮助。

不多说了，二当家今天终于不用上图啦！

我封装的request的代码

/**
 * @desc    API请求接口类封装
 * @author  geekxz@aliyun.com
 * @date    2018-04-12
 */
/**
 * POST请求API
 * @param  {String}   url         接口地址
 * @param  {Object}   params      请求的参数
 * @param  {Object}   sourceObj   来源对象
 * @param  {Function} successFun  接口调用成功返回的回调函数
 * @param  {Function} failFun     接口调用失败的回调函数
 * @param  {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
 */
function requestPostApi(url, params, sourceObj, successFun, failFun, completeFun) {
    requestApi(url, params, 'POST', sourceObj, successFun, failFun, completeFun)
}
/**
 * GET请求API
 * @param  {String}   url         接口地址
 * @param  {Object}   params      请求的参数
 * @param  {Object}   sourceObj   来源对象
 * @param  {Function} successFun  接口调用成功返回的回调函数
 * @param  {Function} failFun     接口调用失败的回调函数
 * @param  {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
 */
function requestGetApi(url, params, sourceObj, successFun, failFun, completeFun) {
    requestApi(url, params, 'GET', sourceObj, successFun, failFun, completeFun)
}
/**
 * 请求API
 * @param  {String}   url         接口地址
 * @param  {Object}   params      请求的参数
 * @param  {String}   method      请求类型
 * @param  {Object}   sourceObj   来源对象
 * @param  {Function} successFun  接口调用成功返回的回调函数
 * @param  {Function} failFun     接口调用失败的回调函数
 * @param  {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
 */
function requestApi(url, params, method, sourceObj, successFun, failFun, completeFun) {
    if (method == 'POST') {
        var contentType = 'application/x-www-form-urlencoded'
    } else {
        var contentType = 'application/json'
    }
    wx.request({
        url:    url,
        method: method,
        data:   params,
        header: {'Content-Type': contentType},
        success: function (res) {
            typeof successFun  == 'function' && successFun(res.data, sourceObj)
        },
        fail: function (res) {
            typeof failFun     == 'function' && failFun(res.data, sourceObj)
        },
        complete: function (res) {
            typeof completeFun == 'function' && completeFun(res.data, sourceObj)
        }
    })
}
module.exports = { 
    requestPostApi,
    requestGetApi
}

使用第一步

在app.js中引入封装的文件const request = require('./utils/request.js') ，然后定义接口域名apiUrl: 'https://www.geekxz.com',

/**
 * @desc    简单API请求示例
 * @author  geekxz@aliyun.com
 * @date    2018-04-12
 */
const request = require('./utils/request.js')
App({
  request: request,
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  /**
   * 定义的接口域名
   */
  apiUrl: 'https://www.geekxz.com',
  globalData:{
    userInfo:null
  }
})

调用封装好的方法

var app = getApp()
Page({
  /**
   * 存储页面数据
   */
  data: {
      expressData : {},
  },
  /**
   * 接口调用成功处理
   */
  successFun: function(res, selfObj) {
      selfObj.setData({
          expressData : res,
      })
  },
  /**
   * 接口调用失败处理
   */
  failFun: function(res, selfObj) {
      console.log('failFun', res)
  },
  /**
   * 页面加载时初始化数据
   */
  onLoad: function() {
      var url     = app.apiUrl+'/query'
      var params  = {
          type   : 'zhongtong',
          postid : '424621263550',
      }
      //@todo 网络请求API数据
      app.request.requestGetApi(url, params, this, this.successFun, this.failFun)
  }
})

如何快速制作微信小程序预约功能, 在这里只要十分钟

如何快速制作微信小程序预约功能, 在这里只要十分钟

开发 | 小程序「分享图」生成难？ 一招教你轻松解决

开发 | 小程序「分享图」生成难？ 一招教你轻松解决

关于Geekxz的那些事儿

更多分享，请持续关注“极客小寨”