0
点赞
收藏
分享

微信扫一扫

对 uniapp 网络请求 uni.request 进行封装

前言

uniapp是一款基于Vue.js框架的跨平台开发工具,可以将代码编译成H5、小程序、App等不同平台的应用。在进行uniapp开发时,网络请求是必不可少的环节。为了方便开发,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题,提高开发效率和代码质量。本文将介绍如何封装网络请求方法。

正文开始

1、封装 uni.request 请求:

在根目录创建 until 目录,在目录下创建 request.js 文件,编写以下代码

// 全局请求封装
const base_url = 'http://localhost:996'
// 需要修改token,和根据实际修改请求头
export default (params) => {
let url = params.url;
let method = params.method || get;
let data = params.data || {};

let header = {}
if (method == post) {
header = {
'Content-Type': 'application/json'
};
}
// 获取本地token
if (uni.getStorageSync(token)) {
header['Authorization'] = 'Bearer ' + uni.getStorageSync(token);
}

return new Promise((resolve, reject) => {
uni.request({
url: base_url + url,
method: method,
header: header,
data: data,
success(response) {
const res = response
// 根据返回的状态码做出对应的操作
//获取成功
console.log(res.statusCode);
if (res.statusCode == 200) {
resolve(res.data);
} else {
uni.clearStorageSync()
switch (res.statusCode) {
case 401:
uni.showModal({
title: 提示,
content: 请登录,
showCancel: false,
success(res) {
setTimeout(() => {
uni.navigateTo({
url: /pages/login/index,
})
}, 1000);
},
});
break;
case 404:
uni.showToast({
title: '请求地址不存在...',
duration: 2000,
})
break;
default:
uni.showToast({
title: '请重试...',
duration: 2000,
})
break;
}
}
},
fail(err) {
console.log(err)
if (err.errMsg.indexOf('request:fail') !== -1) {
wx.showToast({
title: '网络异常',
icon: error,
duration: 2000
})
} else {
wx.showToast({
title: '未知异常',
duration: 2000
})
}
reject(err);

},
complete() {
// 不管成功还是失败都会执行
uni.hideLoading();
uni.hideToast();
}
});
}).catch((e) => {});
};

2、封装对应的 api 文件

在实际项目中,我们也会根据上述请求,封装对应的 api ,所以,我们在根目录下创建 api ,里面放与项目相关的 api

// 引入 request 文件
import request from '@/utils/request'

// 以下 api 为博主项目示例,实际与项目相匹配

// 分页查询学习列表
export const pageStudyInfo = (params) => {
   return request({
       url: '/study/studyInfo/page',
       method: 'get',
       data: params
  })
}

// 查询学习列表
export const listStudyInfo = (params) => {
   return request({
       url: '/study/studyInfo/list',
       method: 'get',
       data: params
  })
}


// 获取学习列表详细信息
export const studyInfoById= (id) => {
   return request({
       url: '/study/studyInfo/'+id,
       method: 'get',
  })
}

// 增加学习列表
export const saveStudyInfo = (params) => {
   return request({
       url: '/study/studyInfo',
       method: 'post',
       data: params
  })
}

// 修改学习列表
export const updateStudyInfo = (params) => {
   return request({
       url: '/study/studyInfo',
       method: 'put',
       data: params
  })
}

// 删除学习列表
export const deleteStudyInfo = (id) => {
   return request({
       url: '/study/studyInfo/delete?id='+id,
       method: 'delete',
  })
}

3、在相关页面使用 封装的 api (以 Vue3 为例)

<script setup>
   // 在页面中导入相关 api
import {pageStudyInfo,listStudyInfo} from @/api/study/info;

// 定义存储请求的结果
const studyList = ref([]);

   // 也买你加载完毕执行
onMounted(() => {
       // 调用函数
getStudyList();
})
// 封装函数,调用 api
const getStudyList = async () => {
let res = await pageStudyInfo(queryParams);
console.log(res.data.records);
studyList.value = res.data.records;
}
</script>

总结

封装请求是指在传输层或应用层对请求数据进行包装,以便在网络中传输和处理。封装请求的好处在于提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。 在封装请求时,需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。 总之,封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求,可以保证数据的安全和可靠性,从而提高应用的性能和用户体验。

举报

相关推荐

0 条评论