uniapp+uview封装小程序请求

提要:

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)
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Redis】Redis三种集群模式-主从、哨兵、集群各自架构的优点和缺点对比

文章目录 前言1. 单机模式2. 主从架构3. 哨兵4. 集群模式总结 前言 如果Redis的读写请求量很大,那么单个实例很有可能承担不了这么大的请求量,如何提高Redis的性能呢?你也许已经想到了,可以部署多个副本节点,业务采用…

无涯教程-Perl - sethostent函数

描述 该函数应在首次调用gethostent之前调用。 STAYOPEN参数是可选的,在大多数系统上未使用。 当gethostent()检索主机数据库中下一行的信息时,然后sethostent设置(或重置)枚举到主机条目集的开头。 语法 以下是此函数的简单语法- sethostent STAYOPEN返回值 此函数不返回…

【Unity每日一记】关于物体(敌方)检测—(向量点乘相关)

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:uni…

Docker中部署Nginx

1.Nginx部署需求 2.操作教程 3.实际步骤 把配置粘过来。

4.3、Flink任务怎样读取Kafka中的数据

目录 1、添加pom依赖 2、API使用说明 3、这是一个完整的入门案例 4、Kafka消息应该如何解析 4.1、只获取Kafka消息的value部分 ​4.2、获取完整Kafka消息(key、value、Metadata) 4.3、自定义Kafka消息解析器 5、起始消费位点应该如何设置 ​5.1、earliest() 5.2、lat…

【腾讯云 TDSQL-C Serverless 产品体验】基于TDSQL-C 存储爬取的QQ音乐歌单数据

【腾讯云 TDSQL-C Serverless 产品体验】基于TDSQL-C 存储爬取的QQ音乐歌单数据 文章目录 【腾讯云 TDSQL-C Serverless 产品体验】基于TDSQL-C 存储爬取的QQ音乐歌单数据前言出现的背景一、TDSQL-C数据库是什么?二、TDSQL-C 的特点三、TDSQL-C的应用场景四、基于TD…

培训报名小程序-用户注册

目录 1 创建数据源2 注册用户3 判断用户是否注册4 完整代码总结 我们的培训报名小程序,用户每次打开时都需要填写个人信息才可以报名,如果用户多次报名课程,每次都需要填写个人信息,比较麻烦。 本篇我们就优化一下功能&#xff0c…

研发工程师玩转Kubernetes——启动、存活和就绪探针

启动(Startup Probe)、存活(Liveness Probe)和就绪探针(Readiness Probe)有其不同的用途和优先级。 优先级和用途 启动探针(Startup Probe)用于Pod内程序告诉kubernetes,其准备工作已经做好。…

【Servlet】(Servlet API HttpServlet 处理请求 HttpServletRequest 打印请求信息 前端给后端传参)

文章目录 Servlet APIHttpServlet处理请求 HttpServletRequest打印请求信息前端给后端传参 Servlet API Servlet中常用的API HttpServlet 实际开发的时候主要重写 doXXX 方法, 很少会重写 init / destory / service destory 服务器终止的时候会调用. //下面的注解把当前类和…

urllib爬虫模块

urllib爬取数据 import urllib.request as request# 定义url url "https://www.baidu.com" #模拟浏览器发起请求获取响应对象 response request.urlopen(url)""" read方法返回的是字节形式的二进制数据 二进制--》字符串 解码 decode( 编码的格式…

部署lawyer-llama

Git - Downloading PackageGit - Downloading PackageGit - Downloading Package 下载git,wget需要下载一下 (GNU Wget 1.21.4 for Windows), Windows中git bash完全可以替代原生的cmd,但是对于git bash会有一些Linu…

一个基于SpringBoot+Vue前后端分离高校心理健康系统详细设计实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…

仓储二代拣货标签接口

1.批量拣货更新标签信息接口 http://localhost/smartpick/associate/lightTags 代码形式: { url : http://localhost/smartpick/associate/lightTags, requestMethed : POST, requestParameter : { [ {"mac":"99.99.22.03","devty…

Docker中部署redis

1.部署redis要求 2.部署教程 连接容器中的redis redis部署完毕

Oracle-如何判断字符串包含中文字符串(汉字),删除中文内容及保留中文内容

今天遇见一个问题需要将字段中包含中文字符串的筛选出来 --建表 CREATE TABLE HADOOP1.AAA ( ID VARCHAR2(255) ); --添加字段INSERT INTO HADOOP1.AAA(ID)VALUES(理解);....--查询表内容SELECT * FROM HADOOP1.AAA;在网上查找了一下有以下三种方式: 第一种&#…

开源数据库Mysql_DBA运维实战 (DCL/日志)

SQL(Structured Query Language 即结构化查询语言) a.DDL语句 数据库定义语言: 数据库,表,视图,索引,存储过程,函数,创建删除ALTER(CREATE DROP ALTER) b.DML语句 数…

在Excel中将数值差距极大的两个序列用对比明显的折线图表示

在Excel中,如果两个数据序列的数值差距太大,用这样的数据序列生成折线图时,折线图会显得过于平缓,趋势对比不明显。如下图: 这时候只要将趋势图设置成双坐标轴,将其中一条趋势线绘制到次坐标轴上&#xff0…

java毕业设计-智慧食堂管理系统-内容快览

首页 智慧食堂管理系统是一种可以提高食堂运营效率的管理系统。它将前端代码使用Vue实现,后端使用Spring Boot实现。这个系统的目的是简化食堂管理,提高食堂服务质量。在现代快节奏的生活中,人们对餐饮服务提出了更高的要求,食堂管…

【Quarkus技术系列】「云原生架构体系」在云原生时代下的Java“拯救者”是Quarkus,那云原生是什么呢?

云原生时代下的Java"拯救者" 在云原生时代,其实Java程序是有很大的劣势的,以最流行的spring boot/spring cloud微服务框架为例,启动一个已经优化好,很多bean需要lazy load的application至少需要3-4秒时间,内…

C语言快速回顾(二)

前言 在Android音视频开发中,网上知识点过于零碎,自学起来难度非常大,不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》,结合我自己的工作学习经历,我准备写一个音视频系列blog。C/C是音视频必…