uniapp项目搭建 请求配置

news2024/11/25 10:25:21

uniapp项目搭建 请求配置

    • 请求配置
      • `utils/request/index.js`代码
      • 分析
        • 几个常用的方法
        • 配置文件的引入
    • 编写接口,并测试调用

每个人项目用的请求接口不一样,这里就看下实现思路就好了

请求配置

在 uniapp 当中有封装好的 request 插件, request插件地址
在项目的 utils/request/index.js 中是对请求的配置

utils/request/index.js代码

/**
 * request插件地址:https://ext.dcloud.net.cn/plugin?id=822
 */
import store from '@/store'
import request from './request'
import Config from '@/core/config'

// 后端api地址
const apiUrl = Config.get('apiUrl')

// 可以new多个request来支持多个域名请求
const $http = new request({
	// 接口请求地址
	baseUrl: apiUrl,
	// 服务器本地上传文件地址
	fileUrl: apiUrl,
	// 服务器上传图片默认url
	defaultUploadUrl: 'upload/image',
	// 设置请求头(如果使用报错跨域问题,可能是content-type请求类型和后台那边设置的不一致)
	header: {
		'content-type': 'application/json;charset=utf-8'
	},
	// 请求超时时间, 单位ms(默认15000)
	timeout: 15000,
	// 默认配置(可不写)
	config: {
		// 是否自动提示错误
		isPrompt: true,
		// 是否显示加载动画
		load: true,
		// 是否使用数据工厂
		isFactory: true
	}
})

// 当前接口请求数
let requestNum = 0
// 请求开始拦截器
$http.requestStart = options => {
	if (options.load) {
		if (requestNum <= 0) {
			// 打开加载动画
			uni.showLoading({
				title: '加载中',
				mask: true
			})
		}
		requestNum += 1
	}
	// 图片上传大小限制
	if (options.method == "FILE" && options.maxSize) {
		// 文件最大字节: options.maxSize 可以在调用方法的时候加入参数
		const maxSize = options.maxSize
		for (let item of options.files) {
			if (item.size > maxSize) {
				setTimeout(() => {
					uni.showToast({
						title: "图片过大,请重新上传",
						icon: "none"
					})
				}, 10)
				return false
			}
		}
	}
	// 请求前加入当前终端
	options.header['platform'] = store.getters.platform
	//todo 后期需增加多语言
	options.header['Accept-Language'] = "zh-CN,zh;q=0.9"
	// 请求前加入Token
	options.header['Authorization'] = 'Bearer ' + store.getters.token

	if (options.ignoreToken && (options.ignoreToken == true || options.ignoreToken == "true")) {
		delete options.header['Authorization'];
	} else {
		//判断token是否为空,为空则不会继续请求
		if (store.getters.token === undefined || store.getters.token === '' || store.getters.token === null) {
			return false
		}
	}

	return options
}

// 请求结束
$http.requestEnd = options => {
	// 判断当前接口是否需要加载动画
	if (options.load) {
		requestNum = requestNum - 1
		if (requestNum <= 0) {
			uni.hideLoading()
		}
	}
}

let showLogin = 0

// 所有接口数据处理(可在接口里设置不调用此方法)
// 此方法需要开发者根据各自的接口返回类型修改,以下只是模板
$http.dataFactory = async res => {
	let httpData = res.response.data
	let statusCode = res.response.statusCode // 这里拿一下响应的状态码

	if (typeof httpData == "string") {
		try {
			httpData = JSON.parse(httpData)
		} catch {
			httpData = false
		}
	}
	if (httpData === false || typeof httpData !== 'object') {
		// 返回错误的结果(catch接受数据)
		console.log(res)
		return Promise.reject({
			statusCode: res.response.statusCode,
			errMsg: "数据工厂验证不通过"
		})
	}

	/*********以下只是模板(及共参考),需要开发者根据各自的接口返回类型修改*********/

	// 判断数据是否请求成功
	// result.status [ 200正常 500有错误 401未登录 403没有权限访问 ]
	// statusCode
	if (statusCode == 200) {
		// 返回正确的结果(then接受数据)
		return Promise.resolve(httpData)
	}
	let message = 'http状态码错误';
	let code = undefined;
	if (statusCode === 400) {
		if (res.response.data) {
			message = res.response.data.message || message;
			code = res.response.data.code || code;
		}
	} else if (statusCode === 504) {
		message = '服务器错误';
	} else if (statusCode === 403) {
		if (res.response.data) {
			message = res.response.data.message || message;
		}
	} else if (statusCode === 404) {

	} else if (statusCode == 401) {
		// 401也有可能是后端登录态到期, 所以要清空本地的登录状态
		if (showLogin === 1) {
			//如果已经提示登录了,则不再重复提示
		} else {
			showLogin = 1
			store.dispatch('Clear')
			// 超时未操作就弹窗提醒是在这里执行的
			// 弹窗告诉用户去登录
			uni.showModal({
				title: '温馨提示',
				content: '此时此刻需要您登录喔~',
				showCancel: false,
				confirmText: "去登录",
				cancelText: "再逛会",
				success: res => {
					showLogin = 0
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/sys/login/index'
						})
					}
					if (res.cancel && getCurrentPages().length > 1) {
						uni.navigateBack()
					}
				}
			})
		}
	} else if (statusCode == 500) {
		if (res.isPrompt) {
			setTimeout(() => {
				uni.showToast({
					title: httpData.message,
					icon: "none",
					duration: 2500
				}, 10)
			})
		}
		// 返回错误的结果(catch接受数据)
		return Promise.reject({
			statusCode: 0,
			errMsg: httpData.message,
			result: httpData
		})
	} else {
		message = '服务器内部错误';
	}

	return Promise.reject({
		statusCode: res.response.statusCode,
		// errMsg: "数据工厂验证不通过",
		errMsg: message,
		code: code,
	})
	/*********以上只是模板(及共参考),需要开发者根据各自的接口返回类型修改*********/
}

// 错误回调
$http.requestError = e => {
	if (e.statusCode === 0) {
		throw e
	} else {
		setTimeout(() => showRequestError(e), 10)
	}
}

// 显示请求错误信息
const showRequestError = (e) => {
	let errMsg = `网络请求出错:${e.errMsg}`
	// #ifdef MP-WEIXIN
	if (e.errMsg === 'request:fail url not in domain list') {
		errMsg = '当前API域名未添加到微信小程序授权名单 ' + e.errMsg
	}
	// #endif
	if (e.errMsg === 'request:fail') {
		errMsg = '网络请求错误:请检查api地址能否访问正常'
	}
	uni.showToast({
		title: errMsg,
		icon: "none",
		duration: 3500
	})
}

export default $http

分析

几个常用的方法

请求开始拦截器
$http.requestStart 中在请求发起之前做了一些处理,比如 :在请求头中加入 token,以及项目所需的其他请求头参数

请求结束后
$http.requestEnd中执行请求结束后期望的动作

对响应数据的处理,所有接口数据处理(可在接口里设置不调用此方法)
$http.dataFactory

配置文件的引入

在这个文件中引入了 Config.js
调用关系如下
在这里插入图片描述

编写接口,并测试调用

  1. 写请求接口
    首先请求接口通常是写在项目的 api 的包中的,根据项目中不同模块功能划分,分别创建对应的目录,然后在目录中创建 index.js ,在 index.js 中写请求路径,以及接口相关

示例代码 :

// 引入 request
import request from '@/utils/request'

// api地址
const api = {
  receive: 'user.coupon/receive', // 这里对应的就是后端请求接口的地址
}

// 优惠券列表
export const receive = (data) => {
	// 这里根据请求是 post/get/put/delete 来写,data就是传递的参数
  return request.post(api.receive, data)
}

  1. 调用请求
    在调用请求的位置,记得先引入,再调用
<script>
	// 这里需要引入接口
	import * as CouponApi from '@/api/user/coupon.js'
	export default {
		data() {
			return {
			}
		},
		methods: {
			// 调用请求测试
			invokeTest() {
				CouponApi.receive({
					// 这里传递参数,根据需要以及接口需要的参数传递
					id: '1001',
					name: 'testName'
				}).then(res => {
					// 这里获取到请求成功后响应的数据,根据业务情况对响应数据进行处理
					console.log(res)
				}).catch(err => {
					// 请求失败获取到的错误信息
					console.log(err)
				})
			}
		}
	}
</script>

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

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

相关文章

【华为设备命令最全大合集,快快收藏】

01 华为交换机基础配置命令 01 常用命令视图 02 创建VLAN //用户视图&#xff0c;一般display命令查看信息比较多。 system-view //准备进入系统视图。 [Huawei]vlan 100 //创建vlan 100。 [Huawei-vlan100]quit //退回系统视图。 03 将端口加入到vlan中 [Huawei] interf…

数字源表如何助力miniled光电性能测试

概述 LED在光电子领域中是一种能将电能转化为光能的半导体二极管&#xff0c;包括砷化镓LED(红光)、磷化镓LED(绿光)、氮化镓LED(蓝光)等。Mini LED&#xff0c;则是指尺寸为50-200微米的LED芯片(参照《Mini LED商用显示屏通用技术规范》的定义)&#xff0c;介于小间距LED和Mic…

软件配置 | mac M1 上 imagemagick 的安装

本文简单记录在 mac M1 上安装 Imagemagick 的过程及其简单使用。 2022 / 11 / 16 软件配置 | mac M1 上 imagemagick 的安装安装brew1.2.make参考链接ImageMagick 是免费软件&#xff0c;以随时可用的二进制分发版或源代码形式提供&#xff0c;您可以在开放和专有应用程序中使…

02-Linux

1 Linux文件管理 1.1 touch命令 在Windows系统中&#xff0c;我们如果想创建一个文本文档或者word文件的时候&#xff0c;通常的做法是 鼠标右键---新建---文本文档&#xff0c;这样的话&#xff0c;我们就成功的创建了一个文件&#xff0c;而在Linux中&#xff0c;我们可以通…

好代码 ,坏代码:你的代码和其他工程师的代码

如果你以团队一员的身份编写代码&#xff0c;你所编写的代码很可能建立在其他工程师编写的代码层次的基础上&#xff0c;其他人也可能以你的代码为基础构建新的代码层次。如果你在工作期间解决了各种各样的子问题&#xff0c;并将其分解为清晰的抽象层次&#xff0c;其他工程师…

WebDAV之葫芦儿·派盘+百灵创作

百灵创作 支持webdav方式连接葫芦儿派盘。 心血来潮想写故事,于是进入了创作、码字状态,不写不知道一码吓一跳,这也太累了吧。 基于创作不易,码字辛苦。对文字,我始终怀有尊重与敬畏之心。不知有什么创作码字软件可以解决这些问题,提高写作效率呢?并且防止写好的文章…

spring框架源码十六、BeanDefinition加载注册子流程

BeanDefinition加载注册子流程时序图时序图1step0、new ClassPathXmlApplicationContextstep1、ClassPathXmlApplicationContext#ClassPathXmlApplicationContext(java.lang.String)step2、ClassPathXmlApplicationContext#ClassPathXmlApplicationContext(java.lang.String[],…

初识类和对象

即使是初学者应该对类和对象也不算陌生吧&#xff0c;是不是因为老有些人动不动就&#xff1a;你知道伐&#xff0c;Java是一款面向对象的语言……阿巴阿巴……我的老师告诉我Java难的一部分就是如何把一个对象给抽象出来&#xff0c;那阿涛不才&#xff0c;今天就先来会一会这…

超市售货统计程序

代码price{"牛奶":5.5,"可乐":6.7,"饼干":10,"糖果":10} day1{"day":"11.23","牛奶":10,"可乐":10,"饼干":10,"糖果":10} day2{"day":"11.24",&quo…

机器学习笔记之条件随机场(六)学习任务介绍(Learning)

机器学习笔记之条件随机场——学习任务介绍引言回顾&#xff1a;条件随机场求解边缘概率分布场景设计前向后向算法关于条件随机场的学习任务关于模型参数λ\lambdaλ求解梯度梯度求解梯度的简化过程总结引言 上一节介绍了使用前向后向算法求解基于链式条件随机场中某隐状态的边…

MySQL—优化数据库

优化MySQL数据库是数据库管理员的必备技能&#xff0c;通过不同的优化方式达到提高MySQL数据库性能的目的。本节将介绍优化的基本知识。 MySQL数据库的用户和数据非常少的时候&#xff0c;很难判断一个MySQL数据库性能的好坏。只有当长时间运行&#xff0c;并且有大量用户进行…

GoogLenet网络详解

GoogLenet VGG在2014年由牛津大学著名研究组vGG (Visual Geometry Group)提出&#xff0c;斩获该年lmageNet竞赛中Localization Task (定位任务)第一名和 Classification Task (分类任务)第二名。Classification Task (分类任务)的第一名则是GoogleNet 。GoogleNet是Google研发…

vue-router 使用与原理分析,测试结果来啦

简介 Vue Router 是Vue.js的官方路由。与Vue.js核心深度集成&#xff0c;让用Vue.js构建单页应用&#xff08;SPA&#xff09;变得更加简单。 对于开发和维护管理后台类的前端项目&#xff0c;页面结构和组合可能非常复杂&#xff0c;所以正确的理解和使用Vue Router就显得尤为…

[附源码]SSM计算机毕业设计ssm新冠疫苗预约接种信息管理JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Spring事务管理

认识事务 可以把一系列&#xff08;多条sql语句&#xff09;要执行的操作称为事务&#xff0c;而事务管理就是管理这些操作要么完全执行&#xff0c;要么完全不执行&#xff08;很经典的一个例子是&#xff1a;A要给B转钱&#xff0c;首先A的钱减少了&#xff0c;但是突然的数…

EMQX数据流转MySQL踩坑日记:EMQX VER 4.2.3

总结&#xff1a; &#xff08;0&#xff09;数据库报错问题&#xff0c;详细参考这篇文档&#xff0c;链接&#xff0c;ln -s 源 目标 https://blog.csdn.net/weixin_42110159/article/details/118945136 &#xff08;1&#xff09;数据库建立数据&#xff0c;要注意大小写&am…

数字化开采|AIRIOT智慧矿山自动化生产解决方案

由于矿山地形复杂&#xff0c;生产自动化水平低&#xff0c;安全监管技术落后&#xff0c;事故频发等很多因素对煤矿开采技术提出了数据化、可视化、智能化的要求。通过目前的煤矿开采现状可以发现煤矿开采过程中&#xff0c;在生产、监管、巡检、安全、效率等方面还存在许多有…

图文详解Linux基础经典教程(08)——CentOS安装MySQL数据库

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 概述 之前&#xff0c;我们在CentOS中安装了JDK、Tomcat&#xff1b;接下来&#xff0c;我们在CentOS中采用YUM的方式安装MySQL5.6数据库。 安装前准备工作 在此&#xf…

面试常用算法归纳

最长子串、子序列 先说明下子串和子序列的问题&#xff1a;对于s “pwwkew"来说&#xff0c;其中一个子串为"wke”&#xff0c;而"pwke" 是一个子序列。 子序列&#xff1a;一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改…

基于Matlab通用视频处理系统的设计-含Matlab代码

⭕⭕ 目 录 ⭕⭕⏩ 一、引言⏩ 二、系统总体方案设计⏩ 2.1 方案设计⏩ 2.2 界面设计⏩ 三、实例分析⏩ 四、参考文献⏩ 五、Matlab程序获取⏩ 一、引言 随着信息技术的发展&#xff0c;基于视频图像中对感兴趣的目标提取&#xff0c;已经逐渐渗透到人们生活的方方面面&#x…