首先打开 app.js 文件写全局方法
/*
obj:{
url:true,//bool类型 定义了两个baseurl,使用这个参数来进行切换
path:path,//接口地址 这里的接口地址是个字符串,定义在urls.js里面的key(具体往下看)
methods:"get",//请求方式 可选(默认get)
params:{},//传递给接口的参数
success:(res)=>{},//成功回调
fail:(err)=>{},//失败回调
}
*/
api:function(obj){
//传过来的参数是个对象
let { baseurl1,baseurl2} = this.globalData;//定义两个全局变量,不同的baseurl,自行配制
let url,methods="get";//声明变量url,默认请求方式为get
let { params,success,fail } = obj;//参数 和 成功 失败 回调
if(obj.url) url = baseurl1;//如果参数url是true 使用第一个baseurl
if(!obj.url) url = baseurl2;//如果参数url是false 使用第二个baseurl
if(obj.methods) methods = obj.methods;//如果设置了请求方式,就按照设置的来
let path = urls[obj.path];//获取接口路径 这里的urls是需要引入的,往下看
url += path;//这里拼接url 如:https://xxx.xxx.com/api/login
return new Promise((resolve,reject)=>{
wx.request({
url: url,//baseurl+地址
methods:methods,//请求方式
data:params,//请求参数
success:function(res){
resolve(success(res.data))//将成功的结果返回出去
},
fail:function(err){
reject(fail(err))//将失败的原因返回出去
}
})
})
}
在 app.js 下方配置 globalData
globalData: {
userInfo: null,
baseurl1:'https://xxx.xxx.com',
baseurl2:'https://xxx.xxx.com'
}
现在来写接口统一管理,在根目录下新建 config / urls.js
在 urls.js 里写出接口管理
export default {
"login":"/api/login",//登录
}
然后在 app.js 引入
import urls from "/config/urls.js";
这时 第一步 的获取接口路径就可以获取到了,第一步里面的 obj 参数里的 path 就可以取到值了
具体页面的调用方法
const app = getApp();//获取app实例,必不可少
const { api } = app;//获取封装的请求方法
Page({
data:{
},
test(){//由页面触发的方法
//请求方法
api({
url:true,//切换baseurl(如果只有一个baseurl自行配置)
path:'login',//urls.js里的key
methods:'get',//请求方式,默认是get
params:{//传递参数
key:value
},
success:(res)=>{
console.log(res)//成功回调
},
fail:(err)=>{
console.log(err)//失败回调
}
})
}
})
只是一个简单的配置,其实做的也就是将 【微信提供的request进行了封装】 ,对 【接口】 进行了 【统一管理】 ,若要做得更细的封装,请自行配置
QQ群:1063233592
个人网站:点击进入