uni-app 统一请求处理 请求拦截器 响应拦截器 请求封装

news2024/12/25 22:09:01

封装API接口

import {http} from '../utils/request.js'
export function login(code){
	return http({
			url:'/wx/getSession',
			 method: 'GET',
			 data:{
				code
			 }
		})
}

调用接口

import {login,test,phoneMessage,updateAvatar} from '../../api/user.js'
function userLogin(){ 
	login(code.value).then(r=>{
		toekn.value=r.data.token
		uni.setStorageSync('Authorization',toekn.value)
	})
}

export function updateAvatar(uri){
	return uni.uploadFile({
			url:'/wx/uploadAvatar',
			filePath:uri,
			name:'file',
			 headers: {
			    'Content-Type': 'application/json; charset=UTF-8',
			  },
	})
}

请求拦截器

const config={
	
	invoke(options){ //请求前
		//options为封装方法传递的参数

		if(!options.url.startsWith('http')){ //不是与http开头
			options.url=baseUrl+options.url //拼接请求地址
		}
		
		options.timeout=1000*5 //配置超时时间 默认60秒
		
		options.header = { //添加原有的头信息
		      ...options.header,
		    };
		
		const token = uni.getStorageSync('Authorization'); //添加token
		if(token){
			options.header.Authorization=token //实例
		}
		
	}
}

uni.addInterceptor('request',config) //添加请求拦截 config为配置

响应拦截器

const http = (options) => {
  // uni.showLoading({
  //   mask: true,
  //   title: "数据加载中",
  // });
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success(res) {
		  
			resolve(res.data)
      },
      // 响应失败
      fail(err) {
		  
        uni.showToast({
          icon: "none",
          title: "网络错误, 换个网络试试",
        });
        reject(err);
		
      },
      complete() {
        uni.hideLoading();
      },
    });
  });
};

文件上传

uni.addInterceptor("uploadFile", config);//文件上传拦截

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

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

相关文章

江苏捷科云:可视化平台助力制造企业智能化管理

公司简介 江苏捷科云信息科技有限公司(以下简称“捷科”)是一家专注于云平台、云储存、云管理等产品领域的创新型企业,集研发、生产和销售于一体,致力于在网络技术领域打造尖端品牌。在推动制造业企业数字化转型的进程中&#xf…

消息队列(一)消息队列的工作流程

什么是消息队列 首先,代入一个场景,我现在做一个多系统的集成,分别有系统A、B、C、D四个系统,A系统因为使用产生了业务数据,B、C、D需要使用这些数据做相关的业务处理和运算,最基本的做法就是通过接口通信…

施耐德变频器ATV320系列技术优势:创新与安全并重

在工业自动化领域,追求高效、安全与智能已成为不可阻挡的趋势。施耐德变频器ATV320系列凭借其强大的设计标准和全球认证,成为能够帮助企业降低安装成本,提高设备性能的创新解决方案。 【全球认证,品质保障】ATV320 系列秉持施耐德…

WEB入门——文件上传漏洞

文件上传漏洞 一、文件上传漏洞 1.1常见的WebShell有哪些?1.2 一句话木马演示1.2 文件上传漏洞可以利用需满足三个条件1.3 文件上传导致的危害 二、常用工具 2.1 搭建upload-labs环境2.2 工具准备 三、文件上传绕过 3.1 客户端绕过 3.1.1 实战练习 :upl…

Android 蓝牙开发-传输数据

概述 传统蓝牙是通过建立REFCCOM sockect来进行通信的,类似于socket通信,一台设备需要开放服务器套接字并处于listen状态,而另一台设备使用服务器的MAC地址发起连接。连接建立后,服务器和客户端就都通过对BluetoothSocket进行读写…

红米Note 9 Pro5G刷小米官方系统

前言 刷机有2种方式:线刷 和 卡刷。 线刷 线刷:需要用电脑刷机工具,例如:XiaoMiFlash.exe,通过电脑和数据线对设备进行刷机。 适用场景: 系统损坏无法开机。恢复官方出厂固件。刷机失败导致软砖、硬砖的…

html + css 淘宝网实战

之前有小伙伴说,淘宝那么牛逼你会写代码,能帮我做一个一样的淘宝网站吗,好呀,看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。 在进行html css编写之前 先了解下网页的组成和网页元素的尺寸吧 1.网页的组成 …

SOME/IP 协议详解——信息格式

文章目录 1. 头部格式1.1 消息 ID(Message ID)1.2 长度(Length)1.3 请求 ID(Request ID)1.4 协议版本(Protocol Version):1.5 接口版本(Interface Version&am…

使用QML实现播放器进度条效果

使用QML实现播放进度效果 QML Slider介绍 直接上DEMO如下: Slider {width: 300;height: 20;orientation: Qt.Vertical; //决定slider是横还是竖 默认是HorizontalstepSize: 0.1;value: 0.2;tickmarksEnabled: true; //显示刻度}效果图如下 那么我先改变滑块跟滚轮…

Android——自定义按钮button

项目中经常高频使用按钮,要求:可设置颜色,有圆角且有按下效果的Button 一、自定义按钮button button的代码为 package com.fslihua.clickeffectimport android.annotation.SuppressLint import android.content.Context import android.gra…

【双指针算法】--复写零(Java版)

文章目录 1. 题目2. 题目解析3. 代码 1. 题目 在线oj 给你一个长度固定的整数数组 arr ,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移。 注意:请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改&a…

联合目标检测与图像分类提升数据不平衡场景下的准确率

联合目标检测与图像分类提升数据不平衡场景下的准确率 在一些数据不平衡的场景下,使用单一的目标检测模型很难达到99%的准确率。为了优化这一问题,适当将其拆解为目标检测模型和图像分类模型的组合,可以更有效地控制最终效果,尤其…

HDR视频技术之十:MPEG 及 VCEG 的 HDR 编码优化

与传统标准动态范围( SDR)视频相比,高动态范围( HDR)视频由于比特深度的增加提供了更加丰富的亮区细节和暗区细节。最新的显示技术通过清晰地再现 HDR 视频内容使得为用户提供身临其境的观看体验成为可能。面对目前日益…

LabVIEW声音信号处理系统

开发了一种基于LabVIEW的声音信号处理系统,通过集成的信号采集与分析一体化解决方案,提升电子信息领域教学与研究的质量。系统利用LabVIEW图形化编程环境和硬件如USB数据采集卡及声音传感器,实现了从声音信号的采集到频谱分析的全过程。 项目…

OpenCL(壹):了解OpenCL模型到编写第一个CL内核程序

目录 1.前言 2.简单了解OpenCL 3.为什么要使用OpenCL 4.OpenCL架构 5.OpenCL中的平台模型(Platform Model) 6.OpenCL中的内存模型(Execution Model) 7.OpenCL中的执行模型(Memory Model) 8.OpenCL中的编程模型(Programmin Model) 9.OpenCL中的同步机制 10.编写第一个OpenCL程序…

Flutter组件————Scaffold

Scaffold Scaffold 是一个基础的可视化界面结构组件,它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏(AppBar)、内容区域(body)、抽屉菜单(Drawer)、底部导…

【数据结构】数据结构整体大纲

数据结构用来干什么的?很简单,存数据用的。 (这篇文章仅介绍数据结构的大纲,详细讲解放在后面的每一个章节中,逐个击破) 那为什么不直接使用数组、集合来存储呢 ——> 如果有成千上亿条数据呢&#xff…

搭建Elastic search群集

一、实验环境 二、实验步骤 Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎Elasticsearch目录文件: /etc/elasticsearch/elasticsearch.yml#配置文件 /etc/elasticsearch/jvm.options#java虚拟机 /etc/init.d/elasticsearch#服务启动脚本 /e…

链原生 Web3 AI 网络 Chainbase 推出 AVS 主网, 拓展 EigenLayer AVS 场景

在 12 月 4 日,链原生的 Web3 AI 数据网络 Chainbase 正式启动了 Chainbase AVS 主网,同时发布了首批 20 个 AVS 节点运营商名单。Chainbase AVS 是 EigenLayer AVS 中首个以数据智能为应用导向的主网 AVS,其采用四层网络架构,其中…

玩转OCR | 探索腾讯云智能结构化识别新境界

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 玩转OCR 腾讯云智能结构化识别产品介绍服务应用产品特征行业案例总结 腾讯云智能结构化识别 腾讯云智能结构化OCR产品分为基础版与高级版&am…