小程序封装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);
})
}）

小程序封装request请求和vue封装axios请求的思想其实是一样的 主要都是通过promise来实现的，网络请求是项目中必不可少的，其封装的思想一定要知道的！

每天一个小知识点，一点一点的成长，加油！