作者:老吴,转载请说明出处
一,封装promise
封装promise是因为可以更加的视觉化代码,更加利于代码的修改与维护
- 先在项目的根目录上创建
env
文件,然后在文件里创建index.js
如图
index.js
里面写了开发的访问环境
module.exports={
//开发环境
Dev:{
"BaseUrl":"http://123.207.32.32:8000"
},
//测试环境
Test:{
"BaseUrl":"https://www.test.com"
},
//生产环境
Prod:{
"BaseUrl": "https://api.douban.com"
}
}
- 在项目的根目录上创建
html
文件,然后在文件里分别创建http.js
,api.js
,fetch.js
效果如图
api.js
代表项目访问的地址
module.exports={
"list":"/api/h8/home/multidata",
"top250": "/v2/movie/top250",
"detail": "v2/movie/subject"
}
fetch.js
代表promise封装的结构
//封装wx.request()网络模块
module.exports=(url,method,data)=>{
let p=new Promise((resolve,reject)=>{
wx.request({
url: url,
method:method,
data:Object.assign({},data),
header:{'Content-Type': 'application/text' },
success(res){
resolve(res)
},
fail(err){
reject(err)
}
})
})
return p;
}
html.js
代表封装的方法
const evn=require('../env/index.js')
const api=require('./api')
const fetch = require('./fetch')
//确定开发环境
let baseUrl=evn.Dev.BaseUrl;
//如果接口需要token鉴权,获取token
// let token=wx.getStorageSync('token');
//轮播请求函数
function banner(){
return fetch(baseUrl+api.list,'get',{})
}
//list列表函数
//分类接口函数
module.exports={
banner
}
二,使用封装后的promise函数
const app = getApp();//挂载app里的方法http
Page({
onLoad: function () {
app.http.banner().then((res) => {//banner是http里封装的一个方法
console.log(res);//res则是请求连接的返回数据
})
},
})
三,总结
-
env
里的的环境是根据请求的路径而改变的 -
api.js
里的路径是根据请求路径里的地址而改变的 -
env
+api.js
里的路径就是封装后的请求路径 -
http.js
需写请求的方法 -
然后再需要使用的组件里使用
getApp()
就可以获取里的方法小白新上手如有不足之处还请多多指教