封装为Promise方式调用
建立一个工具类文件夹，再建立一个公共逻辑处理 JS文件
/**
* methods： 请求方式
* url: 请求地址
* data： 要传递的参数
* resolve： 请求成功回调函数
* reject： 请求失败回调函数
*/
let request = (methods, url, data = {}) => {
return new Promise((resolve, reject) => {
wx.request({
url: url,
method: methods,
header: {
'content-type': methods.toUpperCase() == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded'
},
dataType: 'json',
data: data,
complete: msg => {
if (msg.statusCode != 200) {
reject(msg);
console.error({
msg: '警告：接口异常',
code: 'http状态码：' + msg.statusCode,
url: '接口地址：' + url,
type: '请求类型：' + methods.toUpperCase(),
data: data
});
} else {
resolve(msg.data);
}
}
})
})
}
module.exports = {
request
}
文件引用：
import { request } from '../../utils/common.js'
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let url = 'https://www.apiopen.top/satinApi?type=1&page=1';
request('get', url).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
request('post', url,{ a: 1 }).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
函数回调方式
首先在app.js里面复制这段代码
/**
* methods： 请求方式
* url: 请求地址
* data： 要传递的参数
* callback： 请求成功回调函数
* errFun： 请求失败回调函数
*/
appRequest(methods, url, data, callback, errFun) {
wx.request({
url: url,
method: methods,
header: {
'content-type': methods == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded'
},
dataType: 'json',
data: data,
success: function (res) {
callback(res.data);
},
fail: function (err) {
errFun(err);
}
})
},
首先是get请求
const app = new getApp();
// page/a/a.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//懒人的写法 URL过长和传参多的时候比较不美观
app.appRequest('get', 'https://www.apiopen.top/satinApi?type=1&page=1', {}, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
//稍微优雅一点的写法，其实就是多一行代码,但是美观多了，也好维护
let url = 'https://www.apiopen.top/satinApi?type=1&page=1';
app.appRequest('get', url, {}, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
}
})
get请求时，data传参写为 {} 即可
然后是post请求
const app = new getApp();
// page/b/b.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//懒人的写法 URL过长和传参多的时候比较不美观
app.appRequest('post', 'https://www.apiopen.top/satinApi', { type:1, page:1 }, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
//稍微优雅一点的写法，其实就是多一行代码,但是美观多了，也好维护
let url = 'https://www.apiopen.top/satinApi';
let data = {
type: 1,
page: 1
}
app.appRequest('post', url, data, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
}
})
当然了，如果每一个URL都在页面上面那就增大了维护成本，所以所有接口都应该放置在一个文件，我是选择放在app.js里面。下面是我的写法
//app.js里面添加全局属性，和一个函数
//全局请求URL处理函数
globalRequestUrl(domainName, site) {
return this.globalData[domainName] + this.globalData[site]
},
//全局所有请求Url
globalData: {
domainNameA: 'https://www.apiopen.top',//请求域名A
domainNameB: 'https://www.apiopen.top',//请求域名B
siteA: '/satinApi'
}
使用全局请求URL处理函数在页面C里面使用get请求
const app = new getApp();
// page/c/c.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//懒人的写法 URL过长和传参多的时候比较不美观
app.appRequest('get', app.globalRequestUrl('domainNameA','siteA'), {}, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
//稍微优雅一点的写法，其实就是多一行代码,但是美观多了，也好维护
let url = app.globalRequestUrl('domainNameA','siteA');
app.appRequest('get', url, {}, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
}
})
使用全局请求URL处理函数在页面D里面使用post请求
const app = new getApp();
// page/d/d.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//懒人的写法 URL过长和传参多的时候比较不美观
app.appRequest('post', app.globalRequestUrl('domainNameA','siteA'), { type:1, page:1 }, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
//稍微优雅一点的写法，其实就是多一行代码,但是美观多了，也好维护
let url = app.globalRequestUrl('domainNameA','siteA');
let data = {
type: 1,
page: 1
}
app.appRequest('post', url, data, (res) => {
console.log(res)
}, (err) => {
console.log('请求错误信息： ' + err.errMsg);
});
}
})
//传说中一行完成请求的代码在此，哈哈哈哈哈
app.appRequest('get', app.globalRequestUrl('domainNameA', 'siteA'), {}, (res) => {console.log(res)});
以上就是本文全部内容，希望帮到大家
