1.目录结构
首先在env目录下创建index.js,里面配置开发环境并将其导出
//配置不同的开发环境
module.exports={
//开发环境
Dev:{
baseUrl:'http://123.207.32.32:8000/api/h8', //开发环境的接口
},
//测试环境
Test:{
baseUrl:'http://www.test.com'
},
//生产环境
Prod:{
baseUrl:'http://www.api.douban.com'
}
}
进入http目录，在config.js中统一定义所有的请求url地址，方便维护和管理
//定义请求路径并抛出对象
module.exports={
"banner":"/home/multidata",
"list":"/home/list"
}
在request.js中抛出一个request函数，该函数返回值是一个promise对象
//封装wx.request()网络模块
//抛出一个函数 这个函数会返回一个promise对象
module.exports=(url,method,data)=>{
let p=new Promise((resolve,reject)=>{
wx.request({
url: url, //请求路径
method:method, //请求方式
data:Object.assign({
},data), //请求参数，使用浅拷贝
header:{
"Content":"application/text"}, //请求头，默认参数
success(res){
//成功的回调函数
resolve(res)
},
fail(err){
//失败的回调
reject(err)
}
})
})
return p;
}
入口函数index，这里是入口文件，要做到别人一看就知道这个文件夹是干嘛用的以及怎么使用
//入口函数，引入环境变量，路径和方法在此处统一调用
const Env=require('../env/index')
const Url=require('./config')
const Request=require('./request')
console.log(Request);
//确定当前环境
let baseUrl=Evn.Dev.baseUrl
//如果接口需要token鉴权，获取token
let token=wx.getStorageSync('token') //获取本地存储的token
//请求的函数
//banner请求
function banner(){
//调用该方法，传递路径(环境前缀+路径),方式,参数 函数结果会返回一个promise对象
return Request(baseUrl+Url.banner,'get',{
})
}
//xxx请求 直接照搬就行
//将封装好的方法抛出
module.exports={
banner
}
最后一步咯，在全局app.js中导入index，注册到根组件
//app.js
//引入http请求模块
const http=require('./http/index')
//直接在App方法里简单粗暴挂载一个http方法，挂上去就能用
App({
http,
})
如何使用
//哪个文件要发送请求，就在头部引入app.js里面app这个全局对象
const app=getApp()
//使用方法简单粗暴,括号内可以传参数
app.http.banner().then(res=>{
console.log(res)
})
大概一看，和vue封装axios的思路基本一致——
单独定义路径和请求函数，统一在index.js中调用，并将方法挂载到全局对象。
以后在修改时只需要修改对应的请求路径或添加新的请求方法。