uniapp+uview封装小程序请求

news2024/12/23 17:45:27

提要:

uniapp项目引入uview库 此步骤不再阐述

1.创建环境文件

 env.js:

let BASE_URL;

if (process.env.NODE_ENV === 'development') {
	// 开发环境
	BASE_URL = '请求地址';
} else {
	// 生产环境
	BASE_URL = '请求地址';
}

export default BASE_URL;

2.创建请求文件

该封装文件对后端接口返回格式有规范要求

如接口格式跟封装文件不匹配 可通过 request.js 中响应拦截进行修改 

接口返回格式示例:

{
    code: 200, // 根据code值判断接口状态
    data: {}  // 接口内容
    msg: "success"  // 接口备注
}

request.js:

// 接口共用地址
import BASE_URL from '@/env.js'
var request = function(app) {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		config.baseURL = BASE_URL;
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use(config => {
		config.data = config.data || {}
		// 接口名为login则不携带token
		if(config.url != 'login'){
			config.header['Authorization'] = uni.getStorageSync('token') || ''
		}
		return config

	}, config => {
		// 返回异常承诺对象
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use(response => {
		// uni.hideLoading();
		let data
		switch (response.data.code) {
			case 401 || 402 || 403:
				uni.showModal({
					title: '提示',
					content: response.data.msg,
					showCancel: false, // 隐藏取消按钮
					success: (res) => {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/login'
							})
						}
					}
				})
				break;
			default:
				data = response.data.data;
				break;
		}
		return data;
	}, responseError => {
		// 返回异常承诺对象
		return Promise.reject(responseError)
	})

}

// 导出
module.exports = request;

3.引入请求文件

在根目录main文件内引入

// 引入请求封装
require('@/request/request.js')(app)

4.封装请求文件

 以为 login.js 为例

该POST登录请求的 login函数名  需对应第二步封装文件中的请求不携带token的判断条件

// POST
export const login = (data) => {
	return uni.$u.http.post("login", data);
}
// GET
export const userInfo = (data) => {
	return uni.$u.http.get("userInfo", {
		data
	});
}

5.请求示例

import { login, userInfo } from "@/api/login.js"


data(){
    return{
        id:"",
        form: {
			username: '123456',
			password: '123456',
		},
    }
}



methods:{
    // 登录 POST请求
    login(){
        const data = await login(this.form)
        console.log(data)
		if (data.token) {
            // 如果存在Token 则储存到本地
		    uni.setStorageSync('token', data.token);
		}
    }
    // GET请求
    getUserInfo(){
        const data = await login({id: this.id})
        console.log(data)
    }
}

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

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

相关文章

2023牛客暑期多校训练营9-Non-Puzzle: Segment Pair

2023牛客暑期多校训练营9-Non-Puzzle: Segment Pair https://ac.nowcoder.com/acm/contest/57363/I 文章目录 2023牛客暑期多校训练营9-Non-Puzzle: Segment Pair题目大意解题思路代码 题目大意 解题思路 对于每一对 [ l i , r i ] [l_i,r_i] [li​,ri​]和 [ l i ′ , r i …

海信聚好看将携新品DBdoctor,亮相中国数据库技术大会(DTCC2023)

海信聚好看将携新品DBdoctor,亮相中国数据库技术大会 8月16日—18日,第14届中国数据库技术大会(DTCC-2023)将在北京国际会议中心隆重召开。作为国内数据库领域规模最大的技术交流盛会,吸引了众多业内知名企业和数百名…

2023 8 -14链表OJ

💕人面只今何处去,桃花依旧笑春风💕 作者:Mylvzi 文章主要内容:详解链表OJ题 题目一:环形链表(判断链表是否带环) 题目描述: 画图分析: 代码实现&#x…

怎么把太大的视频压缩变小?这样压缩很轻松

很多网站或者平台对于上传的视频都是有大小限制的,当视频文件体积过大时,我们就需要进行压缩操作,下面就给大家分享几个实用的视频压缩方法,不仅压缩率高,还能保证视频清晰度哦~ 一、HandBrake 这是一款免费的视频处理…

小程序商品如何指定支付方式

不同的支付方式可以满足用户的不同需求,提供更加便捷和灵活的购物体验。例如有些商品需要在线支付,有些商品需要积分支付,有些商品需要货到付款等等。下面就介绍一些关于小程序产品怎么指定支付方式,并且列举了一些常见的支付方式…

RocketMQ 消息消费 轮询机制 PullRequestHoldService

1. 概述 先来看看 RocketMQ 消费过程中的轮询机制是啥。首先需要补充一点消费相关的前置知识。 1.1 消息消费方式 RocketMQ 支持多种消费方式,包括 Push 模式和 Pull 模式 Pull 模式:用户自己进行消息的拉取和消费进度的更新Push 模式:Broker…

江南大学计算机考研分析

24计算机考研|上岸指南 江南大学 江南大学计算机考研招生学院是人工智能与计算机学院。目前均已出拟录取名单。 江南大学人工智能与计算机学院成立于2020年3月,办学历史可追溯到1994年设立的计算机应用专业。学院秉持江南大学“彰显轻工特色,服务国计民…

关于MYSQL日期相减问题

错误写法: SELECT DATE_FORMAT(STR_TO_DATE(20230701,%Y%m%d) -60,%Y%m%d); 但是这种格式有个问题,则会输出空。 正确写法: SELECT DATE_FORMAT(DATE_SUB(20230701,INTERVAL 60 DAY),%Y%m%d);

cad斜线怎么标注尺寸?

好多朋友都在问CAD斜线怎么标注尺寸,CAD绘图中有很多图都是不规则的,你知道CAD中如何对斜线进行标注长度吗?这次将为大家带来cad斜线标注尺寸的方法,希望大家在cad中可以灵活使用! 1:首先,我们…

可独立创建应用的SaaS多租户低代码平台之租户的应用管理说明

在IT系统中,“租户”(tenant)通常用于指代一种多租户架构(multi-tenancy),它是一种软件架构模式,允许多个用户或组织共享相同的应用程序或系统实例,但彼此之间的数据和配置被隔离开来…

【C++】deque容器

0.前言 1.deque构造函数 #include <iostream> using namespace std; #include <deque>//deque构造函数 void printDeque(const deque<int>& d) {for (deque<int>::const_iterator it d.begin(); it ! d.end(); it){//*it 100; //加了const就不能…

01-C++数据类型

3、基础类型 3.1、简单变量 变量的命名 carDrip和cardRip 或boat_sport和boats_port 此外&#xff0c;还有有前缀的命名&#xff0c;使用前缀表示数据类型。常见的前缀有:str&#xff08;表示字符串&#xff09;、n&#xff08;表示整数值&#xff09;、b&#xff08;表示…

从零实现kv存储(1):array初版

本节开始&#xff0c;逐步实现基于内存的kv存储引擎。 一、项目主要功能和知识点 参照redis&#xff0c;主要实现的功能&#xff1a; 1、数据的插入、查询、删除等操作 1&#xff09;SET&#xff1a;插入key - value 2&#xff09;GET&#xff1a;获取key对应的value 3&#…

【JAVA】数组练习

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 数组练习 1. 数组转字符串2. 数组拷贝3.…

Maven基础之仓库、命令、插件机制

文章目录 Maven 仓库中央仓库和本地仓库中央仓库本地仓库 Maven 命令generate 命令compile 命令clean 命令test 命令package 命令install 命令 Maven 插件机制官方插件&#xff1a;Compile 插件Tomcat 7 插件 Maven 仓库 中央仓库和本地仓库 [✎] 简单一点说 中央仓库是一个网…

cs231n assignment2 q5 PyTorch on CIFAR-10

文章目录 嫌啰嗦直接看源码Q5 :PyTorch on CIFAR-10three_layer_convnet题面解析代码输出 Training a ConvNet题面解析代码输出 ThreeLayerConvNet题面解析代码输出 Train a Three-Layer ConvNet题面解析代码输出 Sequential API: Three-Layer ConvNet题面解析代码输出 CIFAR-1…

DevOps系列文章之 GitlabCICD自动化部署SpringBoot项目

一、概述 本文主要记录如何通过Gitlab CI/CD自动部署SpringBoot项目jar包。 二、前期准备 准备三台 CentOS7服务器&#xff0c;分别部署以下服务&#xff1a; 序号系统IP服务1CentOS7192.168.56.10Gitlab2CentOS7192.168.56.11Runner &#xff08;安装Docker&#xff09;3Cen…

docker的入门使用—太详细了

docker的使用 一、Docker概念跟普通虚拟机的对比概念Docker部署的优势使用docker的简要介绍dockerfile和docker-compose区别 二、docker命令介绍&#xff1a;1、构建镜像和运行2、 常用命令 三、镜像加速源四、安装五、Docker快速安装软件演示 Docker 安装 Redis安装 Wordpress…

kubernetes中PV和PVC

目录 一、PV、PVC简介 二、PV、PVC关系 三、创建静态PV 1.配置nfs存储 2.定义PV 3.定义PVC 4.测试访问 四、 搭建 StorageClass nfs-client-provisioner &#xff0c;实现 NFS 的动态 PV 创建 1. 配置nfs服务 2.创建 Service Account 3.使用 Deployment 来创建 NFS P…

Unity Bolt使用协程等待

使用Unity bolt插件可以进行一些简单逻辑开发。本质上相当于把C#接口以图形化的方式进行调用。但是怎么使用协程进行等待呢。经过一些研究&#xff0c;可以使用继承WaitUnit的组件方式进行扩展。下面是具体的操作步骤。 1&#xff1a;等待组件扩展。 经过查找&#xff0c;Bol…