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

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

现象

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>