距离做完项目很久了,腾出点时间,记录下。为了提高效率与可维护性,对其进行了一个简单的封装~
一、目录结构
二、三步骤
1、第一层封装(config.js)
分别针对get与post进行一个公共wx.request请求的封装;每个方法传了2个参数,url与data;
url:接口地址,
data:请求的参数,
const commonUrl ="https://ceshi.com/up/" //公共路径
// post请求封装
function postRequest(url, data) {
var promise = new Promise((resolve, reject) => {
var that = this;
var postData = data;
uni.request({
url: commonUrl + url,
data: postData,
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'token': uni.getStorageSync("token")
},
success: function(res) {
// 此处的code=0,只是个举例,有的可能是1等其他的,具体的看后台决定;
//res.data.data也根据自己的后台返回层级决定,
//有的可能是res.data.data.data等其他形式。
//返回什么就相应的做调整
if (res.statusCode == 200 && res.data.code == 0) {
resolve(res.data.data);
} else {
// 请求服务器成功,但是由于服务器没有数据返回,
//此时无code。会导致这个空数据
// 不下去,导致报错,所以还是要resolve下,这样起码有个返回值,
//不会被阻断在那里执行不下去!
resolve(res.data.data);
}
},
error: function(e) {
reject('网络出错');
}
})
});
return promise;
}
// get请求封装
function getRequest(url, data) {
var promise = new Promise((resolve, reject) => {
var that = this;
var postData = data;
uni.request({
url: commonUrl + url,
data: postData,
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function(res) {
if (res.statusCode == 200 && res.data.code == 0) {
resolve(res.data.data);
} else {
resolve(res.data.data);
}
},
error: function(e) {
reject('网络出错');
}
})
});
return promise;
}
module.exports = {
postRequest,
getRequest
}
2、第二层封装(http.js)
在http.js文件中进行第二层封装,即进行每个具体功能接口的请求封装;
这一层传请求的接口地址url
var config = require('./config.js')
// 文章请求列表
var getArticleList = function(e){
return config.getRequest("article/list",e);
}
module.exports = {
getArticleList
}
3、调用、传参(index.js)
在index.js中调用http.js中的接口;
这一层传请求的参数data
<template>
<view>每日一读</view>
</template>
<script>
import http from '../../utils/http.js';
export default{
onLoad() {
http.getArticleList().then(list=>{
console.log(list)
// 此处的list就是config.js中,wx.request封装中resolve的值,
//即list===res.data.data的值;
})
// 如果需要向服务器传值,可以这样写
http.getArticleList({
open:"value"
}).then(list=>{
console.log(list)
})
}
}
</script>
封装形式多种多样,这里只是其中一种,比如有的封装了一层,调用的时候url与参数data一起传,但不建议这样,后续修改的话要去每个页面改。虽然地址不会经常改,但还是建议最好进行二层封装,把地址放在同一个文件好管理,仅供参考~
小程序与uni.app封装一样,一个wx.request,一个uni.request而已。