uni-app项目网络异常跳转到404页面

uni-app项目网络异常跳转到404页面

1.跳转到404页面流程

  1.某个A页面，发送某个请求，网络异常，拿不到响应
    1.1 这个时候，我们记录当前页面地址url 存储到页面地址
     1.2 进行页面跳转，有两种方法：
      1.2.1 使用uni.redirectTo 跳转到404 页面,因为redirectTo方法不会把调用redirectTo方法的页面加入堆栈，所以跳转后堆栈 :[‘首页’,‘404’]，redirectTo方法表现形式：关闭当前页面，跳转到应用内的某个页面
      1.2.2 如果我们使用navigateTo方法跳转404，navigateTo方法会把使用navigateTo方法的页面，会被加入堆栈中,跳转后堆栈 :[‘首页’,‘A’,‘404’]，navigateTo方法表现形式：保留当前页面，跳转到应用内的某个页面
  2.进入404页面，有个重新加载按钮，当点击了重新加载
    2.1 所以把进入404页面之前，存储的页面地址拿出来
    2.2 如果原先跳转到404页面之前，是调用navigateTo方法跳转，我们就可以使用uni.navigateBack可以返回到原页面，但是ni.navigateBack方法回到原页面不会触发页面的onload方法，
我们项目中有许多页面一开始是用onload方法调用接口的所以不能使用uni.navigateBack方法返回。
    如果使用redirectTo方法返回原页面，假设存在这种情况，
网络一直不好，客户一直点击重新加载，那么堆栈中就是这个样子：[‘首页’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’…‘404’]，因为redirectTo方法从404页面返回原页面，因为会删除404页面，所以404页面不会重复增加
但是A页面返回404时，会不断继续记录A页面地址因为navigateTo方法就是会记录A页面到堆栈中，所以A会不断重复。
    解决这个问题的方法，要么就在A页面跳转404页面后，在404页面删除堆栈中的A页面，因为
A页面有被存储，所以我们知道要跳转哪个页面，这样就是会没有问题，但是没有操作页面栈的方法，所以这个解决方法不可取。
    还有一种方法，就是把A页面跳转404页面方法换成redirectTo方法，这个方法不会把A
页面记录到堆栈中，这样一直点击重新加载，也不会重新重复的A和404页面了。

2.实现业务代码

  当请求网络异常时，会进入如下操作

	  let pagePath = getPagePath();
	 let pageUrl = getPageUrl();
	  if (pagePath !== 'pages/common/404') {
	  	uni.setStorageSync('redirectUrl', pageUrl);
	  	uni.redirectTo({
	  		url: '/pages/common/404'
	  	});
	  }

  进入404页面，点击重新加载，会进行如下操作

	refresh() {
			let pageUrl = uni.getStorageSync('redirectUrl')
			if (pageUrl) {
        if (this.tabBarArr.indexOf(pageUrl) === -1) {
					uni.redirectTo({
						url: pageUrl
					})
				} else {
					uni.switchTab({
						url: pageUrl
					})
				}
			}
		}
	}