接口封装微信小程序
1:第一步在pages同层级创建一个config文件然后里面创建一个config.js文件 里面写入:
const config = {
url : "http://jd.itying.com/api" //你要请求数据的公共接口
};
export {config} 导出
2:第二步在utils文件里创建一个request.js文件然后:
//引入config文件 --- 项目的公共接口
import {config} from "../config/config"
//接口的错误提示码 一般根据给的文档放入报错的状态码
const tips = {
1: '抱歉,出现了一个错误',
1005:'appkey无效,请前往www.7yue.pro申请',
3000:'期刊不存在'
}
class HTTP {
request({url,data={},method = "GET"}){
return new Promise((resolve,reject)=>{
this._request(url,resolve,reject,data,method)
})
};
_request(url,resolve,reject,data={},method="GET"){
wx.request({
url: config.url + url,
method : "GET",
data : data,
header : {},
success : (response)=>{
const code = response.statusCode.toString();
if(code.startsWith("2")){
resolve(response);
}else{
reject();
const error_code = response.data.error_code //1005
this._show_error(error_code)
}
},
fail : function(error){
reject(error)
this._show_error(1);
}
})
}
_show_error(error_code){
// 1005
if(!error_code){
error_code = 1
} // 1005
const tip = tips[error_code]
wx.showToast({
title: tip?tip:tips[1],
icon:'none',
duration:2000
})
}
}
export {HTTP} //最后导出HTTP
3:一般我是再创建一个model文件然后里面(比如要获取首页的数据)就创建一个index.js文件。如果页面数据多的话,可以每个页面都创建一个对应的js文件。里面写入:
import {HTTP} from "../utils/request" //引入封装好的HTTP
class IndexModel extends HTTP {
//比如这是获取轮播图的数据
getBanner(){
return this.request({url : "/focus"}); //公共接口已经封装过了,这里只写后面的接口
};
}
export {IndexModel} //最后导出
4:最后一步在需要获取数据的页面中写入:
//1:首先在最上面引入
import {IndexModel} from "../../model/indexModel"
const indexModel = new IndexModel();
//2:然后我一般在这个生命周期中:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//请求到了轮播图的数据
indexModel.getBanner().then(response=>{
console.log(response)
});
}