1. 在项目下创建一个文件夹https
  2. 然后在文件夹下面创建两个文件api.js request.js
  3. api.js 用于存放项目的请求接口
  4. request.js 用于存放封装的请求接口get post

在static下创建文件appConfig.js

  1. 这个文件用于配置项目的配置项或者说是配置开关
  2. 可以配置请求的基础路径
  3. 有些部分在开发中 ,隐藏起来,展示不对外进行展示;
  4. const appConfig = {
  5. baseUrl: 'https://api.ecscc.net', //基础路径
  6. }
  7. export default appConfig

request.js

  1. import appConfig from "../static/appConfig.js"
  2. export function apiapi(networkUrl,methodsWay,dataCont,util){
  3. // 默认为开启错误提示
  4. if(util == undefined) {
  5. util = {
  6. showError: true,//开启错误提示
  7. }
  8. }
  9. return new Promise((resolve,reject)=>{
  10. uni.request({
  11. url: appConfig.baseUrl+networkUrl, //由基础路径和接口地址
  12. method:methodsWay||"GET",//请求的方式必须大写
  13. data:dataCont||{},//参数
  14. header: {
  15. // 这里等会会配置下?????????????????????????还有token
  16. 'Content-Type': 'application/json',
  17. 'Authorization':"携带的token"
  18. },
  19. // 成功使用resolve
  20. success: (res) => {
  21. if(res.data&&res.data.success){
  22. resolve(res)
  23. }else{
  24. /**
  25. * 请求失败,是否要提示出来;
  26. * showError: true,开启错误提示
  27. * showError: false,关闭错误提示
  28. * */
  29. if(util.showError){
  30. showError(res);
  31. }
  32. resolve(res)
  33. }
  34. },
  35. //失败调用reject,
  36. fail:(err)=>{
  37. // 失败做处理
  38. if(util.showError){
  39. showError(res);
  40. }
  41. reject(err)
  42. }
  43. });
  44. })
  45. }
  46. // 错误处理
  47. const showError = (error) => {
  48. if(error){
  49. switch (error.data.code) {
  50. case 401:
  51. uni.showToast({
  52. title: '没有权限',
  53. icon:'none',
  54. duration: 1000
  55. });
  56. break;
  57. case 403:
  58. uni.showToast({
  59. title: '拒绝访问',
  60. icon:'none',
  61. duration: 1000
  62. });
  63. break;
  64. case 404:
  65. uni.showToast({
  66. title: '很抱歉,资源未找到!',
  67. icon:'none',
  68. duration: 1000
  69. });
  70. break;
  71. case 500:
  72. uni.showToast({
  73. title: '没有权限',
  74. icon:'none',
  75. duration: 1000
  76. });
  77. break;
  78. case 502:
  79. uni.showToast({
  80. title: '服务器异常',
  81. icon:'none',
  82. duration: 1000
  83. });
  84. break;
  85. case 504:
  86. uni.showToast({
  87. title: '网络超时',
  88. icon:'none',
  89. duration: 1000
  90. });
  91. break;
  92. default:
  93. uni.showToast({
  94. title:"网络错误",
  95. icon:'none',
  96. duration: 1000
  97. });
  98. break
  99. }
  100. }
  101. }

api.js

  1. 这里导入的时候,只能够是apipi,因为你暴露的时候,就是apiapi;
  2. 当然你也可以使用别名去修改名称
  3. import {apiapi} from "./request.js"
  4. /**
  5. * 请求的方式大写
  6. * */
  7. export const listArrlist= (params,util)=>apiapi('/api/userInfo/teacherInfo/getTeacherClassValue', 'GET',params,util);
  8. export const demo2= (params)=>apiapi('/school/campusPro/getWeatherByOrgId', 'POST',params);
  9. // 这一句等价于
  10. // const demo2=function(params){
  11. // return apiapi('/school/campusPro/getWeatherByOrgId', 'POST',params)
  12. // }
  13. // export demo2
  1. 在项目中如何使用
  2. index.vue
  3. 引入(我这里是进行按需引入的)
  4. import {listArrlist, demo2} from "../../https/api.js"
  5. created(){
  6. this.roomMettingGrantApi();
  7. this.hospitalIconNmaeScroolApi();
  8. },
  9. methods: {
  10. roomMettingGrantApi(){
  11. demo2().then(res=>{
  12. })
  13. },
  14. // 医院图标 医院姓名 滚动
  15. hospitalIconNmaeScroolApi(){
  16. demo2().then(res=>{
  17. })
  18. },
  19. }
  1. 展示先写在这里;
  2. 后面会继续跟新的哈~~!
  3. 有些同学不喜欢按需引入的话
  4. 可以直接挂载在原型上的哈
  5. main.js中进行挂载的~
  6. 参考 https://www.cnblogs.com/ishoulgodo/p/12805699.html

uni-app封装网络请求的更多相关文章

  1. App 组件化/模块化之路——如何封装网络请求框架

    App 组件化/模块化之路——如何封装网络请求框架 在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...

  2. [iOS微博项目 - 3.3] - 封装网络请求

    github: https://github.com/hellovoidworld/HVWWeibo   A.封装网络请求 1.需求 为了避免代码冗余和对于AFN框架的多处使用导致耦合性太强,所以把网 ...

  3. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...

  4. 09事件传递参数-封装网络请求api get和post合并整合在一起

    1==>通过点击事件进行传递参数 <view bindtap="goEdution" data-index="5">西南大学</view ...

  5. 转-封装网络请求库,统一处理通用异常 (基于volley网络请求库)

    http://blog.csdn.net/kroclin/article/details/40540761 一.前言 volley的发布让网络请求也变得十分便利,但是我们通常懒得很想用一两句代码实现一 ...

  6. andriod开发,简单的封装网络请求并监听返回.

    一.为什么封装 因为android 4.0 以后的发送网络请求必须要放到异步线程中,而异步线程必须跟handle合作才能更新主线程中的UI,所以建议用一个类继承handler来异步处理网络请求. 二. ...

  7. 第六十二篇、AFN3.0封装网络请求框架,支持缓存

    1.网络请求 第一种实现方式: 功能:GET POST 请求 缓存逻辑: 1.是否要刷新本地缓存,不需要就直接发起无缓存的网络请求,否则直接读取本地数据 2.需要刷新本地缓存,先读取本地数据,有就返回 ...

  8. IOS 京东相关app 出现“网络请求失败,请检查您的网络设置”的解决办法

    问题情况 在IOS系统下,下载安装或者更新新版的京东相关app之后,打开app直接就是“网络请求失败,请检查网络设置”,无论是数据连接还是wifi都试了,都是网络请求失败. 然而打开无线局域网-使用无 ...

  9. 分析移动端APP的网络请求抓包

    为了方便,本文以 iOS 系统来进行演示. 使用代理 移动操作系统中都有可以设定系统代理的设置,比如在 iOS 中可以通过 Settings->WLAN 看到很多 Networks,通过点击它们 ...

  10. ios中封装网络请求类

    #import "JSNetWork.h" //asiHttpRequest #import "ASIFormDataRequest.h" //xml 的解析 ...

随机推荐

  1. delphi Image32 图片转换成SVG

    image32中有2种算法转换图像为svg,一种是按透明度计算找边缘,另一种是分析像素梯度找边缘,demo代码整理后如下: unit uFrmImageToSVG; interface uses Wi ...

  2. php yaconf扩展

    在了解到PHP鸟哥还有这个扩展后,我安装尝试了一下 在这里有介绍 https://pecl.php.net/package/yaconf  这里有更详细的代码和说明 https://github.co ...

  3. JVM最简生存指南

    本文由 ImportNew - Grey 翻译自 hadihariri.欢迎加入Java小组.转载请参见文章末尾的要求. 最近更新 : 2014年1月9日 为什么要写这个指南 持续更新 目标人群 基础 ...

  4. FreeRTOS-Error: ..\FreeRTOS\portable\RVDS\ARM_CM4F\port.c, 271

    任务运行时间API函数的应用 当使用任务运行时间API函数打印任务运行时间等相关信息是,串口打印出现这个问题 网上是这么说的 但是运行每个任务都可以执行进去,循序时间API函数也可以执行进去,就是无法 ...

  5. echarts中label上下两行展示

    如上图展示 series: [ //系列列表 { name: '设备状态', //系列名称 type: 'pie', //类型 pie表示饼图 radius: ['50%', '70%'], //饼图 ...

  6. 项目监控之sentry

    github: https://github.com/getsentry/sentry 1.什么是sentry? 当我们完成一个业务系统的上线时,总是要观察线上的运行情况,对于每一个项目,我们都没办法 ...

  7. KETTLE 复制次数

    作用就是开启多线程. 比如上例设置为6. 总共 17条数据,分为6次执行,可以看出是启用了多线程执行.

  8. 腾讯云对象存储COS获Veritas认证,数据安全能力再升级

    近日获悉,腾讯云对象存储 COS 正式通过 Veritas 备份软件标准化测试,为数据安全再添新助力. Veritas 对 COS 的支持已经从底层打通,目前 Veritas 的 NetBackup ...

  9. 《Visual Studio Code 权威指南》登上京东科技IT新书榜第一名!

    自 6 月 30 日开启预售以来,<Visual Studio Code 权威指南>受到了许多读者朋友的青睐.感谢大家的支持! 仅仅三天时间,<Visual Studio Code ...

  10. 更改 macOS 用户帐户和个人文件夹的名称

    https://support.apple.com/zh-cn/HT201548 您可以对创建 macOS 用户帐户时命名的用户帐户和个人文件夹进行重命名.   您的 macOS 用户帐户名称和您个人 ...