概述
本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。
推荐（免费）：uni-app开发教程
uniapp实现网络请求封装的方法：
一、uniapp初始请求使用方式如下：
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
}.fail = (err) => {
console.log(err);
}
});登录后复制二、我们先通过Promise进行一次简单封装,新建request.js文件：
//options参数我们后面会说
function service(options = {}) {
return new Promise((resolved, rejected) => {
uni.request({
url: options.url, //仅为示例，并非真实接口地址。
data: options.data,
header: {
'content-type': 'application/x-www-form-urlencoded',
'accessToken': `${token}` //权限token
},
success: (res) => {
rejected(res.data);
}.fail = (err) => {
rejected(err)
}
});
}
}
export default service;登录后复制三、最后我们在上一步基础上再一次优化。
//把配置项单独处理
import store from '/store/index.js'; //vuex
let server_url=' ';//请求地址
let token = ' '; 凭证
process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //环境配置
function service(options = {}) {
store.state.token && (token = store.state.token); //从vuex中获取登录凭证
options.url = `${server_url}${options.url}`;
//配置请求头
options.header = {
'content-type': 'application/x-www-form-urlencoded',
'accessToken': `${token}` //Bearer
};
return new Promise((resolved, rejected) => {
//成功
options.success = (res) => {
if (Number(res.data.code) == 0) { //请求成功
resolved(res.data.data);
} else {
uni.showToast({
icon: 'none',
duration: 3000,
title: `${res.data.msg}`
});
rejected(res.data.msg);//错误
}
}
//错误
options.fail = (err) => {
rejected(err); //错误
}
uni.request(options);
});
}
export default service;登录后复制四、现在我们在页面中使用。
1、新建pages页面。
目录如下
2、配置api列表。api.js //api列表
import request from '/common/request.js'
export function login(data) {
return request({
url: '/user/login',
method: 'POST',
data
})
}登录后复制3、页面中使用
import { login} from './api.js'; //引入需要的api
//发起请求
onLoad() {
login('parameter').then(data => {
console.log(data);
});
}...登录后复制以上就是uniapp如何实现网络请求封装的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是多情音响为你收集整理的uniapp如何实现网络请求封装的全部内容，希望文章能够帮你解决uniapp如何实现网络请求封装所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复