uni-app 请求 uni.request封装使用

云间渔夫 發表於 2021-1-29 10:36:00

对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。
先在目录下创建 utils 和 common 这2个文件夹
<img src="https://img2020.cnblogs.com/blog/2237618/202101/2237618-20210129103201760-1156242959.png" alt="" loading="lazy">
 
utils 是存放工具类的，common 用来放置常用方法的
之后在utils 中创建 requset.js 用来放置 uni.request 的请求方法，在对其进行简单的封装。
<h5 class="md-end-block md-p">requset.js 代码</h5>
<div class="cnblogs_code">
<pre>import operate from '../common/operate.js'
// vuex 的使用详情参考官网 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'

export default class Request {
http(param) {
 // 请求参数
 var url = param.url,
 method = param.method,
 header = {},
 data = param.data || {},
 token = param.token || "",
 hideLoading = param.hideLoading || false;

 //拼接完整请求地址
 var requestUrl = operate.api + url;

 //请求方式:GET或POST(POST需配置
 // header: {'content-type' : "application/x-www-form-urlencoded"},)
 if (method) {
 method = method.toUpperCase(); //小写改为大写
 if (method == "POST") {
 header = {
 'content-type': "application/x-www-form-urlencoded"
 };
 } else {
 header = {
 'content-type': "application/json"
 };
 }
 }

 //加载圈
 if (!hideLoading) {
 uni.showLoading({
 title: '加载中...'
 });
 }

 // 返回promise
 return new Promise((resolve, reject) => {
 // 请求
 uni.request({
 url: requestUrl,
 data: data,
 method: method,
 header: header,
 success: (res) => {
 // 判断请求api 格式是否正确
 if (res.statusCode && res.statusCode != 200) {
 uni.showToast({
 title: "api错误" + res.errMsg,
 icon: 'none'
 });
 return;
 }
 // code判断:200成功,不等于200错误
 if (res.data.code) {
 if (res.data.code != '200') {
 uni.showToast({
 title: "" + res.data.msg,
 icon: 'none'
 });
 return;
 }
 } else {
 uni.showToast({
 title: "code!=200" + res.data.msg,
 icon: 'none'
 });
 return;
 }
 // 将结果抛出
 resolve(res.data)
 },
 //请求失败
 fail: (e) => {
 uni.showToast({
 title: "" + e.data.msg,
 icon: 'none'
 });
 resolve(e.data);
 },
 //请求完成
 complete() {
 //隐藏加载
 if (!hideLoading) {
 uni.hideLoading();
 }
 resolve();
 return;
 }
 })
 })
}
}</pre>
</div>
在common 中分别创建 operate.js 和 api.js
 operate.js 用来放置请求接口 api 地址
<div class="cnblogs_code">
<pre>export default {
//接口
api: "http://192.168.208.126:8080",
}</pre>
</div>
api.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 api.js中请求即可
<div class="cnblogs_code">
<pre>import Request from '@/utils/requset.js'
let request = new Request().http

//全局定义请求头
export default {
// 请求样式
classifyLeft: function(data) {
 return request({
 url: "/category/list", //请求头
 method: "GET", //请求方式
 data: data, //请求数据
 })
},
}
/*
请求样式：
自定义名字: function(data) {
 return request({
 url: "/banner", //请求头
 method: "GET", //请求方式
 data: data, //请求数据
 token: token, // 可传
 hideLoading: false, //加载样式
 })
},
*/</pre>
</div>
api.js的调用可以在main.js 中进行全局调用，也可以在需要的页面中调用，可根据实际情况来决定是否全局调用。下面只介绍全局调用
在mian.js中导入api.js
<div class="cnblogs_code">
<pre>1. 在main.js 中引入api.js
 import api from '@/common/api.js'
 Vue.prototype.$api = api
2. 在页面中调用
 //不传参数
 this.$api.sendRequest().then((res) => {
 console.log(res);
 })
 //传参
 this.$api.sendRequest({参数}).then((res) => {
 console.log(res);
 })</pre>
</div>
项目地址：https://gitee.com/jielov/uni-app-tabbar
<img src="https://img2020.cnblogs.com/blog/2237618/202101/2237618-20210129103611472-79794050.png" alt="" loading="lazy">

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/14343619.html 
来源：https://www.cnblogs.com/lovejielive/p/14343619.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 请求 uni.request封装使用