微信小程序如何封装api接口
首先创建个http文件夹(可自定义名字)
一:创建个env.js文件用来设置公共访问的url,即环境地址
module.exports = {
//开发环境
dev:{baseUrl:"http://localhost:3000"},
//测试环境
test:{baseUrl:"http://www.test.com"},
//线上环境(公共部分)
prod:{baseUrl:'https://api.it120.cc'}
}
二:二次封装 ajax请求,创建个request.js(自定义)
``
const {baseUrl} = require("./evt.js").prod //引入url地址文件
const subDomain = "lsn" //专属域名
module.exports = { //二次封装
//url:请求接口的地址//
// methode:请求方式 GET POST
//data:要传递的参数
//isSubdomain:表示是否添加二级子域名
request: (url, method = "POST", data = {}, isSubdomain) => {
let _url = `${baseUrl}/${isSubdomain ? subDomain : " " }${url}`
return new Promise((resolve, reject) => {
wx.request({
url: _url,
data: data,
method: method,
header: {
'content-type': ' 专用的请求头'
},
success: res => {
let {code} = res.data
if (code === 0) {
resolve(res.data)
} else {
wx.showToast({
title: '数据请求错误',
})
}
}
})
})
}
}
三:基于业务封装的数据请求,创建个api.js文件
const {request} = require("./request.js") 引入封装的request的请求
module.exports ={ //基于业务封装的数据请求
goods_list:()=>{ //例如封装商品列表的方法
return request("/shop/goods/list","POST",{},true)
}
}
四:当前的页面引入,调用即可
const {goods_list} = require("../../http/api.js")
//引用我们要调用的方法
/*** 生命周期函数--监听页面加载*/
onLoad: function () {
// 调用方法
goods_list().then(res => {
this.setData({
goods_list: res.data
})
})
},