当前位置: 首页 > article >正文

uniapp请求图片时候发现提示GET http://localhost:xxxx/undefined 401,undefined:1解决办法【伸手党福利】

同理解决问题:所有请求发起完成之后执行业务逻辑

目录

    • 现象
    • 原因
    • 解决办法
      • 方法1:提前给变量一个非空默认值
      • 方法2:使用前端图片代替后端
      • 方法3:使用异步加载判断:
      • 注意:这种直接在页面判断内容是否为空或者undefined的方法无效:

现象

uniapp在加载的时候时长发现要动态加载图片,这些图片在加载过程中,会报GET http://localhost:6061/undefined 401 undefined:1,但是页面正常加载成功了。
在这里插入图片描述

原因

页面在请求后端回复加载前,地址变量默认是空的或者undefined,但是页面在加载过程中,已经分配好了变量。导致图片位置变成了向后端的请求。

解决办法

方法1:提前给变量一个非空默认值

方法2:使用前端图片代替后端

方法3:使用异步加载判断:

<template>
<view v-if="show">
			<view class="" style="width: 100%;" v-if="pics1.length!=0">
				<image :src="BaseUrl+'/'+pics1[0]" mode="widthFix" style="width: 100%;background-color: aliceblue;"></image>
			</view>
</view>
</template>
export default {
		data() {
			return {
				show: false,
				}
			}
		}
		methods: {
		getIndexs() {
				this.show = false
				let httpno = 0
				//10秒没有加载成功则刷新
				setTimeout(()=>{
					if(httpno != 3){
						this.$router.go(0);
					}
				},10000)
				
				//第一次加载图片
				let tmp = {
					imageName: 'index111',
				}
				// console.log();
				this.$http.get('/aaImageMenage/aaImageMenage/list', {
						params: tmp
					})
					.then(res => {
					//加载数+1
						httpno += 1
						console.log(httpno);
						if (httpno == 3) {
							this.show = true
						}
						//业务逻辑----------------------
						console.log(res.data.result);
						if (res.data.success == true) {
							//请输入业务逻辑
							this.pics1 = res.data.result.records[0].imageUrl.split(',')
							for (let i = 0; i < this.pics1.length; i++) {
								console.log(this.BaseUrl + '/' + this.pics1[i])
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '您填写的参数有误,请查证后再提交!',
								duration: 2000
							})
						}
						//业务逻辑end----------------------
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '发起失败,请联系管理员!',
							duration: 2000
						})
						console.log(err);
					})


				//第二次加载图片
				tmp = {
					imageName: 'index112',
				}
				// console.log();
				this.$http.get('/aaImageMenage/aaImageMenage/list', {
						params: tmp
					})
					.then(res => {
					//加载数量+1
						httpno += 1
						console.log(httpno);
						if (httpno == 3) {
							this.show = true
						}
						//业务逻辑----------------------
						this.$tools.console1(res)
						console.log(res.data.result);
						if (res.data.success == true) {
							//请输入业务逻辑
							this.pics2 = res.data.result.records[0].imageUrl.split(',')
							this.pics2_2 = this.pics2.splice(1, this.pics2.length - 1)
							console.log("this.pics2_2");
							// console.log(this.pics2_2);
						} else {
							uni.showToast({
								icon: 'none',
								title: '您填写的参数有误,请查证后再提交!',
								duration: 2000
							})
						}
						//业务逻辑end----------------------
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '发起失败,请联系管理员!',
							duration: 2000
						})
						console.log(err);
					})
				//加载第3个图片
				tmp = {
					imageName: 'index113',
				}
				// console.log();
				this.$http.get('/aaImageMenage/aaImageMenage/list', {
						params: tmp
					})
					.then(res => {
					//图片加载成功数量+1
						httpno += 1
						console.log(httpno);
						if (httpno == 3) {
							this.show = true
						}
						//业务逻辑----------------------
						console.log(res.data.result);
						if (res.data.success == true) {
							//请输入业务逻辑
							this.notice = res.data.result.records[0].imageDetail
							// this.pics3 = res.data.result.records[0].imageUrl.split(',')
						} else {
							uni.showToast({
								icon: 'none',
								title: '您填写的参数有误,请查证后再提交!',
								duration: 2000
							})
						}
						//业务逻辑end----------------------
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '发起失败,请联系管理员!',
							duration: 2000
						})
						console.log(err);
					})

			},
		}

注意:这种直接在页面判断内容是否为空或者undefined的方法无效:

//无效方法:
<image :src="BaseUrl+'/'+pics1[0]" mode="widthFix" style="width: 100%;background-color: aliceblue;"></image>

http://www.kler.cn/a/14576.html

相关文章:

  • 如何使用Truffle开发太坊智能及其区块链
  • 使用PCL滤波器实现点云裁剪
  • 在 Apple 设备(包括 iPad、iOS 和 MacBook)上为用户提供完整的 SAP GUI
  • 203、【栈与队列】leetcode ——剑指 Offer II 040. 矩阵中最大的矩形 / 85. 最大矩形:暴力+单调栈(C++/Pyhont版本)
  • 基于springboot“漫画之家”系统(附源码、设计文档)
  • K8S第一讲 Kubernetes之Secret详解
  • ansible自动运维——ansible使用临时命令通过模块来执行任务
  • Spring Boot中使用Redis
  • Cloud Kernel SIG月度动态:发布 Anolis 8.8 镜像、kABI 社区共建流程
  • 代码随想录_贪心_leetcode 1005 134
  • 数学知识四
  • 注册服务 linux
  • 开放原子训练营第三期:RT-Thread 学习有感
  • Netty 单机百万连接测试
  • 聚焦能源 | 赛宁网安亮相2023年中国能源网络安全大会
  • 4.26日报
  • OpenCL、CUDA 与C++ AMP之间,开发者该如何选择
  • NGFW的protal认证实验
  • 【翻译一下官方文档】认识uniCloud云数据库(基础篇)
  • 部署Ansible