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

  • • 发表于 1个月前
  • • 作者 小寨主
  • • 754 次浏览
  • • 7 条评论
  • • 最后编辑时间 1个月前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

概述

前几日关注的用户问我有没有封装好的小程序网络请求接口,那么小程序请求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)
  }
})

分享到:
评论区(共7条评论)
7条评论
Ctrl+Enter
作者

小寨主

小寨主

APP:0 帖子:15 回复:27 积分:749

已加入社区[259]天

创业中的小青年,专业攻城狮,业余设计喵!

作者详情》
Top