文件说明:
1、 http.js
文件的作用是: 封装wx.request
2、api.js
文件的作用是:统一管理所有接口;
3、 mine.js
文件的作用是: 调用请求接口
http.js
/**
* 这个文件的作用是:
* 封装wx.request
*/
module.exports = {
http(url, method, params) {
// 获取token,自行获取token和签名,token和签名表示每个接口都要发送的数据
let token = "token";
// 获取签名
let sign = "sign";
let data = {
token,
sign,
};
if (params.data) {
/**
* 在这里判断一下data是否存在,params表示前端需要传递的数据,params是一个对象,
* 有三组键值对,data:表示请求要发送的数据,success:成功的回调,
* fail:失败的回调,这三个字段可缺可无,其余字段会忽略
*/
for (let key in params.data) {
// 在这里判断传过来的参数值为null,就删除这个属性
if (params.data[key] == null || params.data[key] == "null") {
delete params.data[key];
}
}
data = {
...data, ...params.data };
}
wx.request({
// 就是拼接上前缀,此接口域名是开放接口,可访问
url: "https://api.it120.cc/" + url,
method: method == "post" ? "post" : "get",
data,
header: {
"content-type": "application/json",
},
success(res) {
params.success && params.success(res.data);
},
fail(err) {
params.fail && params.fail(err);
},
});
},
};
api.js
/**
* 文件的作用是:统一管理所有接口;
* 在这里面定义所有接口,一个文件管理所有接口,易于维护;
* 引入刚刚封装好的http模块,import属于ES6的语法,微信开发者工具必须打开ES6转ES5选项
**/
import {
http } from "./http";
function femaleNameApi(params) {
http("small4/banner/list", "post", params); // 接口请求的路由地址以及请求方法参数在此处传递
}
// 向外派出去的函数
export default {
femaleNameApi,
};
mine.js
// 调用请求的接口
import http from '../../network/api' // 引入api接口管理文件
Page({
data: {
femaleList:[]
},
onLoad: function () {
http.femaleNameApi({
// 调用接口,传入参数
data:{
pageSize:1
},
success:res=>{
console.log('接口请求成功',res)
this.setData({
femaleList:res
})
},
fail:err=>{
console.log(err)
}
})
}
})
参数说明:
- 传递一个对象,对象有三组键值对,data:表示要发送的数据,success:成功回调,fail:失败回调
- 三个键值对均可传可不传,其余值会忽略,基本和微信API调用方式一致,减少了强迫症的烦恼