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…
阅读更多...
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…
阅读更多...
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_…
阅读更多...
[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 等。 前言 在这个…
阅读更多...
div 背景图 居中

div 背景图 居中

这里主要是 background-position: center;属性很给力 div{width: 100%;height: 100%;background-image: url(../../../assets/initialize.png);background-repeat: no-repeat;background-size:70px 70px;background-position: center;}
阅读更多...
CCNA知识总结（一）

CCNA知识总结（一）

什么是路由&#xff1a; 路由就是为了形成“FIB”。 在路由器上分为2大类&#xff1a; 1&#xff09; Coutrol Plane 控制平面就是&#xff1a;“路由协议”&#xff0c;就是为了2个设备之间的交互来形成“FIB”。 2&#xff09; Data Plane 数据平面就是&#xff1a;“Forw…
阅读更多...
记录uni-app弹框事件无生命周期问题；uni-popup-dialog打开触发事件；uni-popup-dialog调用接口时机

记录uni-app弹框事件无生命周期问题；uni-popup-dialog打开触发事件；uni-popup-dialog调用接口时机

项目需求&#xff1a;点击页面的 品牌型号 按钮&#xff0c;打开弹框&#xff0c;将 车架号码 参数传入接口获取到对应的 品牌型号列表&#xff0c;在进行选择后关闭弹框。 实际开发中&#xff0c;我在父组件里面引入了弹框子组件&#xff1b;诡异的事情发生了&#xff1a; 在…
阅读更多...
最常用的两种C++序列化方案的使用心得（protobuf和boost serialization）

最常用的两种C++序列化方案的使用心得（protobuf和boost serialization）

From: http://www.cnblogs.com/lanxuezaipiao/p/3703988.html 导读 1. 什么是序列化&#xff1f; 2. 为什么要序列化&#xff1f;好处在哪里&#xff1f; 3. C对象序列化的四种方法 4. 最常用的两种序列化方案使用心得 正文 1. 什么是序列化&#xff1f; 程序员在编写应用程序…
阅读更多...
SCCM 2012系列16 操作系统播发⑤

SCCM 2012系列16 操作系统播发⑤

添加了操作系统映像&#xff0c;也创建了任务序列&#xff0c;那么我们改对创建的任务序列编辑一下了&#xff0c;以满足我们播发下去系统的要求是我们想要的&#xff0c;比如分区是怎么样的&#xff0c;当然分区不是固化的&#xff0c;是按照百分比来进行划分的&#xff0c;详…
阅读更多...
vue旋转图片功能，旋转放大图片功能；vue旋转放大div元素

vue旋转图片功能，旋转放大图片功能；vue旋转放大div元素

需求&#xff1a;可以旋转、放大、颠倒图片。 html: <div class"imgtop"><img class"imgboxele" id"xingshizhengzhengben" :src"imgurl" alt""></div><div class"imgtxt">行驶证正本<…
阅读更多...
xp和win7安装telnet服务

xp和win7安装telnet服务

xp&#xff1a; 有些ghost版本的xp会精简掉telnet服务 首先telnet服务需要的几个文件&#xff1a; tlntadmn.exe tlntsess.exe tlntsvr.exe tlntsvrp.dll 文件分享&#xff1a;https://yunpan.cn/cSaaaXjUrKFHu 访问密码 719d 将以上几个文件拷贝到c:\windows\system32下&…
阅读更多...
linux centos7.2 nodeJs全局安装

linux centos7.2 nodeJs全局安装

先下载nodeJS 选一个linux版本的http://nodejs.cn/download/ 下载下来得到个node-v8.12.0-linux-x64.tar.xz这样的文件 用xftp上传到服务器你想安装的目录 xftp破解版链接:http://www.xue51.com/soft/1456.html xshell破解版链接:http://www.cncrk.com/downinfo/219821.html …
阅读更多...
WebView 和JS 之间交互

WebView 和JS 之间交互

2019独角兽企业重金招聘Python工程师标准>>> 1.android中利用webview调用网页上的js代码。 Android 中可以通过webview来实现和js的交互&#xff0c;在程序中调用js代码&#xff0c;只需要将webview控件的支持js的属性设置为true&#xff0c;&#xff0c;然后通过lo…
阅读更多...
【libjpeg.lib】在Windows7下编译生成libjpeg.lib

【libjpeg.lib】在Windows7下编译生成libjpeg.lib

一、准备&#xff1a; 下载最新的jpeg库源码&#xff1a;http://www.ijg.org/files/jpegsr9a.zip 二、编译 1. 解压到指定目录&#xff0c;我是&#xff1a;E:\program\opensource\jpeg-9a-win 2. 打开VS2010命令行窗口(为了得到VS2010的环境)&#xff0c;并切换到E:\program…
阅读更多...
uni-app图片加水印；小程序图片添加水印；使用canvas上传图片加水印

uni-app图片加水印；小程序图片添加水印；使用canvas上传图片加水印

原博主&#xff1a;点击查看 需求&#xff1a; 微信小程序&#xff0c;上传图片&#xff0c;成功后图片有水印&#xff0c;既图片的网络地址也有水印。 上传图片使用uni-app的uni.chooseImage&#xff08;&#xff09;方法&#xff0c;水印是用canvas。 以下代码可以直接使用…
阅读更多...
vue或js解析文件excel表格js通过插件解析表格读取文件

vue或js解析文件excel表格js通过插件解析表格读取文件

安装插件 cnpm i xlsx --save-dev cnpm i jquery --save-dev 引入插件 html引入文件 <input type"file" id"excel-file" value"file"/> dom加载完成解析文件 mounted() {$(#excel-file).change(function(e) {var files e.target.fi…
阅读更多...
微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；

微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；

本片封装了微信小程序request请求&#xff1b;为别是post get put请求&#xff0c;重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request()请求 2.1 manifest.json&#xff1a;解决H5浏览器跨域问题-----配置代理一定要重启项目 // 自定义配…
阅读更多...
关“视觉神经系统是怎么形成的？”的思考

关“视觉神经系统是怎么形成的？”的思考

http://www.cnblogs.com/mrxsc/p/5571358.html 视觉信息的处理是一个非常复杂的过程&#xff0c;这不由得让我想到了同样位于人们大脑中的新大脑皮层&#xff0c;作为人类智能的起始之地&#xff0c;它的运作也不简单&#xff0c;但是在婴儿时期&#xff0c;它的各部分单元并没…
阅读更多...
uni-app控制小程序版本更新；小程序自动更新版本；uni-app发布新版本后仍旧是老版本问题

uni-app控制小程序版本更新；小程序自动更新版本；uni-app发布新版本后仍旧是老版本问题

问题&#xff1a; 首先小程序&#xff0c;更新版本发布后&#xff0c;用户的版本一般情况下仍是旧版本&#xff1b;需要手动删除小程序后&#xff0c;在重新搜索打开才能使用新版本&#xff1b; 原因查看&#xff1a; 运营机制&#xff1b;更新机制&#xff1b; 解决办法&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023