共计 1352 个字符,预计需要花费 4 分钟才能阅读完成。
uni-app 数据申请封装和 api 接口治理
1. 开发环境 uni-app
2. 电脑系统 windows10 专业版
3. 在应用 uni-app 开发的过程中, 咱们常常会应用到数据申请, 上面我我对 uni-app 数据申请的封装和接口治理, 心愿对你有所帮忙!
4. 在 pages 同级新建一个目录,http(名字本人定义), 在 http 目录下新建一个 http.js 文件, 增加代码如下:
function req(obj) {return new Promise((resolve, reject) => {
// const HOST = baseUrl;
var method = obj.method || "GET";
// var url = HOST + obj.url || "";
var url = obj.url || "";
var data = obj.data || {};
var header = obj.header || obj.method == ('post' || 'POST') ? {'Content-Type': obj.contentType || 'application/x-www-form-urlencoded',} : {'Content-Type': obj.contentType || 'application/json',};
var success = obj.success; // 胜利回调函数
var fail = obj.fail; // 示意失败后,要执行的回调函数
uni.request({
url: url,
data: data,
method: method,
header: header,
success: ((res) => {if (res.statusCode === 203) {console.log('返回 203 状态码')
// 错误处理,返回登录页
// uni.reLaunch({url:'/pages/login/index'})
} else if (res.statusCode === 200) {resolve(res)
}
}),
fail: ((err) => {reject(err)
})
})
})
}
export default req
5. 在 http 目录同级, 新增一个 api 目录, 在 api 目录上面新建一个 api.js, 增加如下代码:
import req from '../http/http.js' // 导入 封装的申请
let api = {};
// 申请数据
api.getfeng = data => { //getfeng 示意办法名,data 示意参数
return req({
url: '/api/feng', // 申请接口
method: 'post', // 申请办法
data: data // 传参
})
};
export default api // 导出
6. 在 vue 模板中增加如下代码:
import api from '../../api/api.js' // 导入接口
7. 在 methods 中增加如下代码:
chengeth5(){api.getfeng({name:'陈',age:'100'}).then((res)=>{console.log(res); // 输入数据
})
},
7-1. 在 mounted 中增加如下代码:
this.chenget();
8. 我的项目构造如下:
9. 在浏览器中成果为:
10. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!
正文完