微信小程序API 封装及调用
一、根目录新建 API文件夹
API文件夹名字 自定义
二、api.js、 config.js、 request.js 三者关系
三、request.js
封装所有请求的方法，在调用接口起 复用，不必重复编写请求代码
引用 config.js 中的基本 url 比如:https://www.ddd.com/interface
const { baseUrl } = require('./config.js').url
//url 具体接口地址
//data 请求数据
//封装请求
module.exports={
request:function(url,data={}) {
wx.showLoading({
title: '加载中...',
})
// console.log('data---------- ',data);
// console.log('url---------- ',url);
let headers= {
'Content-type':'application/x-www-form-urlencoded',
'content-type': 'application/json'
}
//检查本地token
let token = wx.getStorageSync("token");
// console.log('token--------- ',token);
//header携带 本地token
if(token)
{
headers['session']=token;
}
// console.log('headers---------- ',headers);
return new Promise((resolve,reject)=>{
wx.request({
url: baseUrl+url,//动态组合 接口地址
method:"POST",
data,
header:headers,
success(res){
// console.log('res -------- ',res)
if(res.data.msg ==="TimeOut" && res.data.success === false) {
// 请求超时 自定义代码
}
//数据请求成功判断
if (res.statusCode===200 ) {
// 请求成功 自定义代码
// console.log('res.data----- ',res.data);
resolve(res.data);
wx.hideLoading()
}
else {
resolve(res.data)
return wx.showToast({
icon: 'none',
title: '请求失败',
duration: 2000,
})
}
}
})
})
}
}
四、config.js
封装 域名地址 其他信息
module.exports={
url:{
baseUrl:'https://www.ddd.com/interface'
},
//其他信息 自定义
contInfo:{
vers : "1.0.9",//版本
}
}
五、api.js
//引用 request.js
const { request }=require('./request.js');
//封装接口
module.exports={
//登录接口
login:(data)=>{
return request('/login',data)
},
//退出接口
loginout:(data)=>{
return request('/logout',data)
},
//banner图接口
getBanner:()=>{},
// 自定义 接口....
}
六、页面使用
小程序 js 页面引用 api.js
const { login,loginout}=require('../..//http/api.js')//api接口
Page({
data: {
phone: '12345678901',
password: '123456'
},
onLoad: function() {},
login(){
const formData = {
phone:this.data.phone,
password:this.data.password
}
login(formData).then(data=>{
console.log("data--- ",data)
//自定义代码
})
}
})
拓展
Storage 存/删
// 本地保存 token/session
wx.setStorageSync('token', data.token)
// 本地删除 token/session
wx.removeStorageSync('token');
Request请求超时处理
App.json 添加
"networkTimeout": {
"request": 100000 //自定义 ms为单位
}
在封装的 request.js 中 加 fail 接口请求超时显示信息
wx.request({
url: baseUrl+url,
method:"POST",
data,
header:headers,
success(res){},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '提示',
showCancel: false,
content: '请求超时！',
})
}
})