微信小程序(其他小程序),发送请求简单,但在一个成十上百个小程序文件的项目中,我们每一个小程序文件都要写 wx.request岂不是很麻烦?后期的维护也不方便,所以我们要对 wx.request进行进一步的封装
-
第一步: 首先我们先创建一个http文件夹,然后里面再建三个小文件夹,分别为env.js, api.js, request.js。
-
第二步: 编辑env.js文件内容:
分开环境,方便切换环境。
module.exports = {
// 开发环境
dev: {
baseUrl: 'https://127.0.0.0:8080'
},
// 测试环境
test: {
baseUrl: 'https://me.test.com'
},
// 生产环境
prod: {
baseUrl: 'https://me.prod.com'
}
}
-
第三步: 编辑request.js文件内容:
开始封装。
const { baseUrl } = require('./env').dev
// 封装ajax
module.exports = {
request: function(url, method = 'POST', data = {}, isLoading = true) {
// 操作url
var url = `${baseUrl}/${url}`
// 操作data
var data = data
console.log(url,data)
if (isLoading) wx.showLoading({ title: '加载中...' })
return new Promise((resolve, reject)=>{
wx.request({
url: url,
method: method,
data: data,
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success(res) {
if (res.statusCode === 200 && res.data.code === 0) {
resolve(res.data)
} else {
wx.showToast({
title: '接口有问题',
icon: 'none'
})
reject(res.data)
}
},
fail() {
wx.showToast({
title: '接口有问题',
icon: 'none'
})
reject(res.data)
}
})
})
}
}
-
第四步: 编辑api.js文件内容:
统一放接口,方便修改和整理。 可以创建多个api文件,如:api1.js、api2.js、api3.js。
const { request } = require('./request')
module.exports = {
// 获取列表
getList:(d)=>request('shop/list', 'POST', {d}, true),
// 获取详情
getDetails:(d)=>request('shop/details', 'POST', {d}, true)
}
-
第五步: 引入到页面:
//index.js
const { getList, getDetails } = require('../../http/api')
//......
//......
onLoad: function() {
let data = {
code: 1,
page: 1,
pageSize: 10,
}
getList(data).then((res)=>{
console.log(res)
})
}