uniapp 配置请求代理+请求封装

news2024/9/23 15:25:13

uniapp官网提供了三种方式:什么是跨域 | uni-app官网

1. 通过uniapp自带浏览器 打开项目是不存在跨域的

·

第二种方式: 

"h5" : {
        "template" : "static/index.html",
       "devServer": {
		   "proxy": {
			   "/api": {
				   "target": "http://192.168.31.162:8288",
				  "changeOrigin": true
			   }
		   }
        },
      
        "router" : {
            "mode" : "hash", // 路由模式
            "base" : "./"
        },
        "sdkConfigs" : {
            "maps" : {
                "amap" : {
                    "key" : "ca8cde9d6d4d6658826713d31d3df9c2",
                    "securityJsCode" : "",
                    "serviceHost" : ""
                }
            }
        }
    }

uniapp 请求封装

import store from '@/store'
import config from '@/config'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { toast, showConfirm, tansParams } from '@/utils/common'




let timeout = 10000
const baseUrl = config.baseUrl

const request = config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  // get请求映射params参数
  if (config.params) {
    let url = config.url + '?' + tansParams(config.params)
    url = url.slice(0, -1)
    config.url = url
  }
  return new Promise((resolve, reject) => {
    uni.request({
        method: config.method || 'get',
        timeout: config.timeout ||  timeout,
        url: config.baseUrl || baseUrl + config.url,
        data: config.data,
        header: config.header,
        dataType: 'json'
      }).then(response => {
        let [error, res] = response
        if (error) {
          toast('后端接口连接异常')
          reject('后端接口连接异常')
          return
        }
        const code = res.data.code || 200
        const msg = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
          showConfirm('登录状态已过期,您可以继续留在该页面,或者重新登录?').then(res => {
            if (res.confirm) {
              store.dispatch('LogOut').then(res => {
                uni.reLaunch({ url: '/pages/login' })
              })
            }
          })
          reject('无效的会话,或者会话已过期,请重新登录。')
        } else if (code === 500) {
          toast(msg)
          reject('500')
        } else if (code !== 200) {
          toast(msg)
          reject(code)
        }
        resolve(res.data)
      })
      .catch(error => {
        let { message } = error
        if (message === 'Network Error') {
          message = '后端接口连接异常'
        } else if (message.includes('timeout')) {
          message = '系统接口请求超时'
        } else if (message.includes('Request failed with status code')) {
          message = '系统接口' + message.substr(message.length - 3) + '异常'
        }
        toast(message)
        reject(error)
      })
  })
}

export default request

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

汇凯金业:3个高效的黄金投资技巧

黄金投资中的高效技巧往往承载了许多投资前辈的智慧与经验教训,成为新手投资者宝贵的学习资料。历史上积累的黄金投资经验可以作为新投资者的学习榜样。 3个高效的黄金投资技巧 一、稳健的中长期投资策略 在金属投资领域虽然不乏短线交易高手,但新手投资…

BFS和DFS优先搜索算法

1. BFS与DFS 1.1 BFS DFS即Depth First Search,深度优先搜索。它是一种图遍历算法,它从一个起始点开始,逐层扩展搜索范围,直到找到目标节点为止。 这种算法通常用于解决“最短路径”问题,比如在迷宫中找到从起点到终…

若依微服务docker-compose 启动

docker-compose 文件 version : 3 services: ruoyi-nacos: container_name: ruoyi-nacos image: nacos/nacos-server build: context: ./nacos environment: - MODEstandalone volumes: - ./nacos/logs/:/home/nacos/logs - ./n…

SpringBoot+MybatisPlus实现读写分离,自动切换数据源

读写分离有必要吗? 实现读写分离势必要与你所做的项目相关,如果项目读多写少,那就可以设置读写分离,让“读”可以更快,因为你可以把你的“读”数据库的innodb设置为MyISAM引擎,让MySQL处理速度更快。 实现…

python turtle 升国旗

​一、导语 大家好,前段时间,我们画出了五星红旗,今天我们要用Python的Turtle库来绘制一个五星红旗,并让国旗上升,让我们一起来感受编程与艺术的完美结合吧!领略国家的强大!爱祖国,做一个遵纪守法的好公民。 二、效果展示 升国旗 三、开发过程 一、准备工作 首先我们…

品牌银饰售卖|基于SSM+vue的品牌银饰售卖平台的设计与实现(源码+数据库+文档)

品牌银饰售卖平台 目录 基于SSM+vue的品牌银饰售卖平台的设计与实现 一、前言 二、系统设计 三、系统功能设计 1前台功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题…

怎么扫码查看文件内容?多文件一键生成二维码的方法

现在日常生活中经常会看到很多的二维码中包含文件,扫码后在手机上预览文件内容或者下载文件,有很多的应用场景下被使用。通过扫描二维码的方式实现文件的传递,与传统方式相比更加方便快捷。 这种方式能够提升获取文件的便捷性,而…

在大型项目上,Python 是个烂语言吗?

在开始前我有一些资料,是我根据网友给的问题精心整理了一份「Python的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!! python项目超过5万行&#x…

谷粒商城实战(024 业务-订单模块-分布式事务1)

Java项目《谷粒商城》架构师级Java项目实战,对标阿里P6-P7,全网最强 总时长 104:45:00 共408P 此文章包含第284p-第p290的内容 简介 模拟积分服务出异常,前方的锁库存事务未回滚,这时候就需要分布式事务 本地事务 事务的隔离…

echarts 环形图实现透明间隔,嵌套环形图片和图形

echarts 环形图实现透明间隔,嵌套环形图片和图形 环形图实现透明间隔环形图嵌套环形图片环形图嵌套环形图形 环形图实现透明间隔 首先通过 radius 属性实现一个圆环图 再通过 padAngle 属性设置扇区角度即可 使用 borderRadius 属性设置扇形区块的内外圆角半径&…

新时代高速数据中心800G DR8光模块解决方案

近年来,随着5G网络、存储介质和计算能力等基础技术的不断升级,100G和400G数据中心得到了普及。如今800G数据中心时代也已经来临。本文将围绕800G DR8来介绍飞速(FS)800G数据中心解决方案,旨在为全球客户提供全面且高性…

如何在阿里云申请免费SSL证书(三个月有效)

SSL证书主要用于建立Web服务器和客户端间可信的HTTPS协议加密链接,以防止数据在传输过程中被篡改,避免信息泄露。阿里云提供了多种品牌和类型的SSL证书,以满足不同用户的需求。您可以根据自己的预算、域名类型以及网站类型,选择购…

【Qt】按钮类控件(二)

文章目录 按钮类控件1、Push Button代码示例: 带有图标的按钮代码示例: 带有快捷键的按钮 2、Radio Buttion代码示例: click, press, release, toggled 的区别代码示例: 单选框分组(QButtonGroup) 3、 Check Box代码示例: 获取复选按钮的取值 按钮类控件…

Cow Exhibition G的来龙去脉

[USACO03FALL] Cow Exhibition G - 洛谷 曲折经过 爆搜 一开始没什么好的想法&#xff0c;就针对每头奶牛去or不去进行了爆搜。 #include <cstdio> #include <algorithm> using namespace std;#define maxn 405 int iq[maxn], eq[maxn]; int ans; int n;void d…

C++系统编程篇——Linux初识(系统安装、权限管理,权限设置)

(1)linux系统的安装 双系统---不推荐虚拟机centos镜像&#xff08;可以使用&#xff09;云服务器/轻量级云服务器&#xff08;强烈推荐&#xff09; ①云服务器&#xff08;用xshell连接&#xff09; ssh root公网IP 然后输入password ①添加用户&#xff1a; addus…

企业研发必备网络:这些关键特性,你get了吗?

对于以研发为核心的企业&#xff0c;如软件开发、生物制药、智能汽车等&#xff0c;安全、稳定的研发网络可是他们业务发展不可或缺的。那么&#xff0c;这些研发网络究竟有哪些独特之处&#xff0c;又能为企业带来哪些价值呢&#xff1f; 首先&#xff0c;我们知道企业研发常常…

【设计模式】JAVA Design Patterns——Adapter(适配器模式)

&#x1f50d;目的 将一个接口转换成另一个客户所期望的接口。适配器让那些本来因为接口不兼容的类可以合作无间。 &#x1f50d;解释 现实世界例子 考虑有这么一种情况&#xff0c;在你的存储卡中有一些照片&#xff0c;你想将其传到你的电脑中。为了传送数据&#xff0c;你需…

【管理咨询宝藏104】普华永道财务管理与内控培训

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏104】普华永道财务管理与内控培训 【格式】PDF版本 【关键词】普华永道、四大、财务管理 【核心观点】 - 职能转变后&#xff0c;财务在决策支持…

「前端」性能优化问题总结

前言 本文主要介绍一些前端通用的性能优化方案总结&#xff0c;非写代码阶段的性能优化。 分包 React router V6.4 数据路由新特性 <Route path/xx lazy{async()>{const module await import(./xx)const XX module.defaultreturn{element:(<Suspense fallback…

紫光展锐先进技术科普 | 工业互联网遇到5G,1+1>2?

随着工厂自动化的加速普及&#xff0c;如今我们可能经常看到这样的场景&#xff1a;在高温、潮湿、粉尘、腐蚀等恶劣环境作业场景&#xff0c;巡检机器人穿梭其中&#xff0c;工人们不必弯腰去搬沉重又危险的器件&#xff0c;而旁边会有一个个机械臂帮手平稳有序地完成好所有搬…