uniapp网络请求封装和全局配置,uniapp网络请求封装 带拦截器
uniapp实现网络请求封装的方法：首先实现初始请求；然后新建【request.js】文件，代码为【返回新承诺((已解决，已拒绝)={uni.request.】;最后进行优化即可。
单一应用程序开发（仿饿了么)开发课程：进入学习
本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。
推荐（免费):uni-app开发教程
uniapp实现网络请求封装的方法：
一、uniapp初始请求使用方式如下：
uni.request({
网址：https://www。举例。，//仅为示例，并非真实接口地址。
数据：{
文本：" uni.request "
},
标题：{
custom-header: hello //自定义请求头信息
},
成功：(res)={
控制台。日志(研究数据)；
}.失败=(错误)={
控制台。日志(错误)；
}
});二、我们先通过Promise进行一次简单封装，新建request.js文件：
//选项参数我们后面会说
函数服务(options={}) {
退回新承诺((已解决，已拒绝)={
uni.request({
url: options.url，//仅为示例，并非真实接口地址。
数据：选项。数据，
标题：{
content-type : application/x-www-form-urlencoded ，
accessToken: `${token}` //权限代币
},
成功：(res)={
拒绝(研究数据)；
}.失败=(错误)={
拒绝（错误)
}
});
}
}
导出默认服务；三、最后我们在上一步基础上再一次优化。
//把配置项单独处理
从"/store/index.js "导入存储区；//vuex
let server _ URL=//请求地址
设token=凭证
process.env.NODE_ENV===开发？192 .168 .0 .1 : http://* * */API ；//环境配置
函数服务(options={}) {
商店。状态。token(token=存储。状态。token)；//从状态管理中获取登录凭证
选项。URL=` ${ server _ URL } ${ options。URL } `；
//配置请求头
options.header={
content-type : application/x-www-form-urlencoded ，
访问令牌“:` $ { token } `//载体
};
退回新承诺((已解决，已拒绝)={
//成功
options.success=(res)={
如果(数字(分辨率数据。code)==0){//请求成功
已解析(分辨率数据。数据)；
}否则{
uni.showToast({
图标："无",
时长：3000,
标题：` ${ RES . data。msg } `消息
});
拒绝(研究数据。味精)；//错误
}
}
//错误
options.fail=(err)={
拒绝（错误);//错误
}
统一请求(选项);
});
}
导出默认服务；四、现在我们在页面中使用。
1、新建页页面。
目录如下
common
request.js //请求
pages
index
api.js //api列表
index.vue //页面文件
static
store
index.js/vuex
main.js
App.vue
manifest.json
pages.json
2、配置美国石油学会(美国石油协会)列表api.js //api列表
从"/common/request.js "导入请求
导出功能登录（数据){
退货请求({
网址："/用户/登录",
方法： POST ，
数据
})
}3、页面中使用
从导入{登录} ./API。js’；//引入需要的美国石油学会(美国石油协会)
//发起请求
onLoad() {
登录(参数)。然后(数据={
console.log(数据);
});
}.以上就是uniapp如何实现网络请求封装的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。