概述
前几日关注的用户问我有没有封装好的小程序网络请求接口，那么小程序请求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的那些事儿
更多分享，请持续关注“极客小寨”
