uni.request接口封装；小程序uni-app接口封装

另一篇请求接口简单封装在api下的index.js

本片资源下载地址

本片封装了post get put请求，重点在request.js文件

1.新增四个文件
在这里插入图片描述

2.根目录下的utils下的request.js封装uni.request()请求

注意 ：需要根据自己接口的 statusCode 状态码 、数据状态码 return_code 和提示信息 return_message 做对应替换
需要更改公共地址
需要注意store的token获取
需要注意 封装了get post put请求 需要其他的请求自行继续封装

import store from '../store'let baseUrl = ''
let isExisited = falseconst $https = {}switch (process.env.NODE_ENV) {case 'development':// 公共的地址开发baseUrl = 'http://172.17.2.112:8080/'breakcase 'test':baseUrl = 'https://test.epen.ltd/'breakcase 'production':baseUrl = 'https://production.epen.ltd/'breakdefault:baseUrl = 'https://default.epen.ltd/'
}
console.log('baseUrl', baseUrl)function httpRequest(settings, opts) {const { loading, hasToken, toast, checkToken } = optsconst token = uni.getStorageSync('token_key')const hasUserInfo = store.getters.hasUserInfoif (hasToken !== false) {settings.header['Token'] = token// if (!token) {//   uni.showModal({//     title: '提示',//     content: '身份失效，请重新登录！',//     complete: () => {//       uni.reLaunch({ url: '/pages/index/index' })//     },//   })//   return// }}let showLoading = loading !== falseif (showLoading) uni.showLoading({ title: '加载中...', mask: true })return new Promise(function (resolve, reject) {uni.request({...settings,success: (res) => {const { statusCode, data } = resconsole.log('接口返回的res', statusCode, res)if (showLoading) uni.hideLoading()// 判断 statusCode 是否是200 查看接口调用是否成功switch (statusCode) {case 200:breakcase 500:// reject({ statusCode: 500, return_message: '服务器重启中...' })uni.showToast({title: data.return_message || '服务器重启中...',duration: 2000,icon: 'none',})returndefault:// reject({ statusCode: statusCode, return_message: '请求失败' })uni.showToast({title: data.return_message || '请求失败,请重试！',duration: 2000,icon: 'none',})return}//在接口200 调用成功后 才能进行判断接口内的状态码 return_code 以此判定作何操作和提示const result = res.dataswitch (result.return_code) {case '0':// 成功的数据data状态码  则直接返回数据resolve(result)breakcase '4011':uni.clearStorage()if (hasUserInfo && !isExisited && !checkToken) {isExisited = trueuni.showModal({title: '提示',content: '身份失效，请重新登录！',complete: () => {uni.reLaunch({ url: '/pages/index/index' })},})} else {reject(result)}breakdefault:reject(result)if (toast !== false) showErrors(result)}},fail: (res) => {console.log('请求fail', res)if (showLoading) uni.hideLoading()uni.showToast({title: res.return_message || '请求失败,请重试！',duration: 2000,icon: 'none',})},})})
}function showErrors(res) {const { return_code, return_message } = resswitch (return_code) {case 4004:uni.showToast({title: return_message,duration: 2000,icon: 'none',})breakdefault:uni.showToast({title: return_message || '请求失败',duration: 2000,icon: 'none',})}
}function setParams(params) {let result = []for (let p in params) {result.push(`${p}=${params[p]}`)}return '?' + result.join('&')
}$https.get = function (opts) {const { params, data, toast, hasToken, loading, checkToken } = optsif (params) opts.url = opts.url + setParams(params)let defaultOpts = {url: baseUrl + opts.url,data: data,method: 'GET',header: {'X-Requested-With': 'XMLHttpRequest',Accept: 'application/json','Content-Type': 'application/json; charset=UTF-8',},dataType: 'json',}return httpRequest(defaultOpts, { loading, toast, hasToken, checkToken })
}$https.put = function (opts) {const { params, data, toast, hasToken, loading } = optsif (opts.params) opts.url = opts.url + setParams(opts.params)let defaultOpts = {url: baseUrl + opts.url,data: data,method: 'PUT',header: {'X-Requested-With': 'XMLHttpRequest',Accept: 'application/json','Content-Type': 'application/json; charset=UTF-8',},dataType: 'json',}return httpRequest(defaultOpts, { loading, toast, hasToken })
}$https.post = function (opts) {const { params, data, toast, hasToken, loading } = optsif (params) opts.url = opts.url + setParams(params)let defaultOpts = {url: baseUrl + opts.url,data: data,method: 'POST',header: {'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json; charset=UTF-8',},dataType: 'json',}return httpRequest(defaultOpts, { loading, toast, hasToken })
}export { $https, baseUrl }

3.pages/api/modules.js
注意：api下 一个模块js文件 存放一个模块的接口方法

/*data为 {}请求参数，params为 {}, 最后更改为url传参opts为 {loading: false,hasToken: false}其中loading为false不显示loading框hasToken为false, 请求不需要tokenreturn $https.get({url,data,params,...opts})return $https.post({url,data,params,...opts})*/
import { $https } from '../../utils/request'
// 获取学生列表
export function getStudentList(params) {return $https.get({url: `main/stuWork/answersBySerial`,params,loading: false,})
}
// 获取练习下题目信息
export function getQuestionByWorkId(params) {return $https.get({url: `main/work/queStatus/${params.workId}`,})
}
// 获取练习下所有题目批改信息 暂不使用
export function getQuestionCorrectByWorkId(params) {return $https.get({url: 'main/resource/getQuestion',params,})
}// 提交单道题目批改结果
export function submitCorrectAnswer(data) {return $https.post({url: `main/correction/subCorrResult`,data,loading: false,})
}// 动态id获取练习信息
export function getExerciseInfo(id) {return $https.get(`main/interaction/start/${id}`)
}
// 直接get获取
export function getProductcategory() {return $https.get({url: `api/v1/accident/productcategory/list`,})
}
// get参数获取
export function getInsurancecompany(params) {return $https.get({url: `api/v1/accident/insurancecompany/list`,params,})
}
// post参数请求
export function postInsurance(data) {return $https.post({url: `api/v1/accident/insurance/list`,data,})
}

4.请求vue页面

<template><view><view>objData: {{objData}}</view><view style="margin-top:50px;">arrData:<view v-for="item in arrData" :key="item">{{item}}</view></view><!-- <button type="primary" @click="get">原生请求</button><button type="primary" @click="getType">封装后 async await获取</button><button type="primary" @click="postType">封装后 .then()获取</button> -->..<button type="primary" @click="get1">utils完全封装--直接get</button><button type="primary" @click="get2">utils完全封装--参数get</button><button type="primary" @click="post1">utils完全封装--post参数</button></view>
</template><script>
import { getProductcategory, getInsurancecompany, postInsurance } from "../api/modules";
export default {data() {return {value: 0,objData: {},arrData: []}},methods: {get() {uni.showLoading({title: '加载中...',mask: true,})uni.request({url: 'http://localhost:2222/yiiapp/order/list-all-web',data: {refund_status: 0,action: 'multiple_orders',order_type: 0,index: 0,limit: 10,status: 3,key: '',},header: {// 使用公众号的CookieCookie: '_uab_collina=162036568869229763220898; Hm_lvt_79ee0e9f63d4bd87c861f98a6d497993=1621240284,1621300029,1621410251,1621411597; PHPSESSID=mpmdmr4d7vneg6tpmmgm130gu1; user_id=3963; ZHBSESSID=e3aab6cf717a4d549c87735d0c39110e; Hm_lpvt_79ee0e9f63d4bd87c861f98a6d497993=1621504639'},method: 'POST',success: (res) => {uni.hideLoading()if (res.statusCode !== 200) {return uni.showToast({title: '获取数据失败',icon: "none",mask: true,})}console.log('原生获取res', res);this.objData = res.data.data},fail: (error) => {uni.hideLoading()uni.showToast({title: '请求接口失败',icon: "none",})console.log(error);}})},async getType() {const res = await this.$myRequest({url: 'yiiapp/order/list-all-web',})console.log('使用async await获取返回的参数', res);this.objData = res.data},postType() {this.$myRequest({url: 'yiiapp/car-ins-stat/get-car-ins-stat',method: 'POST',data: {agency_id: 125,stat_date_type: '3',dim: 'self-team-insurancecompany'}}).then(res => {console.log('使用.then()获取返回的参数', res);this.arrData = res.data})},changeType(e) {// console.log(e);this.value = e.target.value},get1() {getProductcategory().then(res => {console.log('res', res);this.arrData = res.data})},get2() {getInsurancecompany({ productCategory: 7 }).then(res => {console.log('res', res);this.arrData = res.data})},post1() {let obj = {insuranceCompany: "",insuranceName: "",pageIndex: 15,pageSize: 1,productCategory: ""}postInsurance(obj).then(res => {console.log('res', res);this.arrData = res.data})}}
}
</script><style lang="scss">
button {width: 260px;margin-top: 2px;
}
</style>

5.成功接口请求：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.失败接口：
404提示：
在这里插入图片描述

接口调用成功200 但是data的状态码返回异常 做提示:
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/403676.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

php 功能函数集

php 功能函数集

1.获取页面闭合带id标签数据 View Code 1 <?php2 header("Content-type: text/html; charsetutf-8"); 3 /**4 * $tag_id HTML tag_id like id"abc"5 * $url web url6 * $tag HTML tag7 * $data HTML data if…
阅读更多...
JS prototype作用

JS prototype作用

prototype可查看原型属性&#xff0c;还可对原型添加属性或方法 function Car(name) {this.name name;this.run function () {console.log(this.heightcm this.name is run!)}}var dazhong new Car(dazhong);Car.prototype.height null; //给对象添加新属性…
阅读更多...
高性能并发TCP网络服务-IOCP框架修正VC2008版本

高性能并发TCP网络服务-IOCP框架修正VC2008版本

From: http://blog.csdn.net/lsfa1234/article/details/6223635 高性能并发TCP网络服务IOCP框架修正VC2008版本 从Source Code里可发现&#xff0c;此工程整合的epoll&#xff0c;iocp及kqueue三种模型&#xff0c;应该是非常有用的一个东东&#xff08;如果ACE能够把它的那些…
阅读更多...
解决uni-app小程序图片转base64；微信小程序上传图片转base64；

解决uni-app小程序图片转base64；微信小程序上传图片转base64；

base64转微信小程序图片 点击看这篇 以下是小程序图片转base64&#xff1a; uni.chooseImage({count: 6, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择success: function (res) {console…
阅读更多...
java中byte转换int时为何与0xff进行与运算

java中byte转换int时为何与0xff进行与运算

另一篇分析如下&#xff1a; byte为什么要与上0xff&#xff1f; 在剖析该问题前请看如下代码 public static String bytes2HexString(byte[] b) {String ret "";for (int i 0; i < b.length; i) {String hex Integer.toHexString(b[ i ] & 0xFF);if (hex.l…
阅读更多...
element 增加自由验证

element 增加自由验证

<el-form-item label"社会统一信用代码" prop"socialCode"><el-input v-model"ruleForm.socialCode"></el-input></el-form-item> 主要是validator返回的是对象 rules: {socialCode: [ //社会统一信用代码{requir…
阅读更多...
ADempiere 360LTS 地址(Address)的中国格式定制

ADempiere 360LTS 地址(Address)的中国格式定制

地址(Address)的中国格式定制AD里面设置合作伙伴&#xff0c;仓库等需要输入地址的地方&#xff0c;目前都是按照美国的习惯&#xff0c;即使国家选择了中国&#xff0c;还是不符合国内习惯&#xff0c;下面通过配置可使地址按照&#xff1a;省、市、详细地址的格式显示1) 国家…
阅读更多...
git 配置免密登陆

git 配置免密登陆

SSH免密码登录配置 注意&#xff1a;这些命令需要在git bash here中敲 注意先配置好账户名和邮箱 # git config user.name zhangsan # git config user.email zhangsanqq.com # 使用–global参数&#xff0c;配置全局的用户名和邮箱&#xff0c;只需要配置一次即可。推荐配置…
阅读更多...
ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL

ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL

ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代&#xff0c;我们不得不做一些东西来讨好爬虫&#xff0c;进而提示网站的排名来博得一个看得过去的流量。 URL重写与优化就是搜索引擎优化的手段之一。 假如某手机网站(基于AS…
阅读更多...
js splice

js splice

splice(删除数组第几个,删除几个数据) splice(从第几个新增,如果设置为 0&#xff0c;则不会删除项目。,新增的对象)
阅读更多...
PHP autoload实践

PHP autoload实践

本文目的 本文简要的描述了PHP提供的autoload机制&#xff0c;以及在scake中使用实践。用于减少不必要的文件包含&#xff0c;提高php系统性能。 什么是__autoload php是脚本语言&#xff0c;不同于c只需要编译一次&#xff0c;php每次执行过程中都需要编译&#xff0c;所以…
阅读更多...
mac无法ssh localhost

mac无法ssh localhost

From: http://www.2cto.com/os/201203/123274.html mac 无法ssh localhost&#xff0c;错误提示&#xff1a;bash: /usr/local/bin/ssh_session: Permission denied 在网上找了很久也没有找到解决方案&#xff0c;最后根据提示自己摸索如下&#xff1a; 1.编辑/etc/sshd_confi…
阅读更多...
文件加密及解密openssl

文件加密及解密openssl

Openssl是一个开源的用以实现SSL协议的产品&#xff0c;它主要包括了三个部分&#xff1a;密码算法库、应用程序、SSL协议库。Openssl实现了SSL协议所需要的大多数算法。 下面我将单介绍使用Openssl进行文件的对称加密操作。 一、Openssl支持的加密算法有&#xff1a; -aes-128…
阅读更多...
el-select回显

el-select回显

<el-select style"width:162px;" change"aaa" v-model"searchObj.id" placeholder"请选择"><el-option v-for"item in optionsId" :key"item.value" :label"item.value" :value"item.lab…
阅读更多...
i标签content属性输入空白

i标签content属性输入空白

content: \20; 表示里面有值&#xff0c;你可以随便操作了
阅读更多...
Mac OS X下查看CPU信息

Mac OS X下查看CPU信息

From: http://forum.51nb.com/tid698668 在终端输入&#xff1a;sysctl -a | grep ".cpu." 以下是我的电脑的输出信息: hw.ncpu: 8 hw.activecpu: 8 hw.physicalcpu: 4 hw.physicalcpu_max: 4 hw.logicalcpu: 8 hw.logicalcpu_max: 8 hw.cputype: 7 hw.cpusubtype:…
阅读更多...
MS SQLSERVER 各种乱七八糟

MS SQLSERVER 各种乱七八糟

2019独角兽企业重金招聘Python工程师标准>>> 这个是看完了sql语法的一点个人练手&#xff0c;没什么价值&#xff0c;权且当做记录 select employee_id,dept_code,last_name,manager_id from l_employees where last_name like %e%--%代表任意字符串 order by dept_…
阅读更多...
第二阶段团队项目冲刺第三天

第二阶段团队项目冲刺第三天

1.&#xff08;昨天干了什么&#xff09; 昨天基本将我们网站的框架搭建起来了&#xff0c;但是还是有很多的不完善&#xff0c;并没有达到我想要的效果。 2.&#xff08;今天准备干什么&#xff09; 今天计划完善我们的网站框架&#xff0c;添加一些一般网站都有的按钮、快捷方…
阅读更多...
uni-app阻止事件冒泡

uni-app阻止事件冒泡

<!-- #ifdef MP-WEIXIN --><uni-icons v-if"key_word" tap.stop"closeInput(e)" class"input-uni-icon" type"closeempty" size"22" color"#ccc" /><!-- #endif -->注意&#xff1a;事件必须要…
阅读更多...
[C++11 std::thread] 使用C++11 编写 Linux 多线程程序

[C++11 std::thread] 使用C++11 编写 Linux 多线程程序

From: http://www.ibm.com/developerworks/cn/linux/1412_zhupx_thread/index.html 本文讲述了如何使用 C11 编写 Linux 下的多线程程序&#xff0c;如何使用锁&#xff0c;以及相关的注意事项&#xff0c;还简述了 C11 引入的一些高级概念如 promise/future 等。 前言 在这个…
阅读更多...
最新文章

Copyright @ 2022~2023