小程序封装request请求
为了减少代码量 以及方便后期的维护 ，把小程序中的request请求封装起来是很有用的
建一个和page同级的文件夹http
1.建立一个nev.js 文件 封装各个环境下的公共接口
module.exports={
//开发环境
dev:{
baseUrl:'http://127.0.0.1:8080'
},
//生产环境
prod:{
baseUrl:'https://api.it120.cc'
},
//测试环境
test:{
baseUrl:'https://api.1909A.com'
}
}
2.建立一个reque.js 文件 封装request核心ajax请求
const { baseUrl } = require('./env.js').prod
//封装ajax
const vipUrl='专属域名'
module.exports={
request:function(url,method="GET",data={},isSubDomain=true) {
let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl:''}/${url}`;
//数据请求成功前的loading加载
wx.showLoading({
title: '玩命加载中',
})
//promise封装request
return new Promise((resolve,reject)=>{
wx.request({
url: fullUrl,
method,
data,
header:{
'Content-type':'application/x-www-form-urlencoded'
},
success(res){
// console.log('res::',res)
//数据请求成功判断
if (res.statusCode===200 && res.data.code===0) {
resolve(res.data.data)
wx.hideLoading()
}else {
wx.showToast({
title: '接口有问题，请检查',
})
reject('接口有问题，请检查')
}
},
fail(error) {
wx.showToast({
title: '数据接口有问题',
})
reject('数据接口有问题')
}
})
})
}
}
3.建立api.js 封装各个接口
const { request }=require('./request.js');
//项目中用到的各种业务接口的封装
module.exports={
//商品分类接口
goodsCate:()=> {
return request('shop/goods/category/all','GET','',true)
},
//banner图接口
getBanner:()=>{},
//商品详情接口
getDetail:(id)=>{
return request('shop/goods/detail','GET',{id:id},true)
},
//其他接口....
}
4.找一个一个需要接口的页面 在他对应的js 页面引入
//通过结构赋值的方式~
const { goodsCate, getDetail}=require('../..//http/api.js')
Page({
data:{
desc:[]
},
onShow(e) {
var that = this;
goodsCate().then(res=>{
console.log('index.js中接收:',res)
})
// let id=e.detail
getDetail(395742).then(res=>{
console.log('商品详情：',res.content)
this.setData({
desc: res.content
})
WxParse.wxParse('article', 'html', that.data.desc, that, 5);
})
}）
