用户登录

通过网络请求服务不能保证每次都能正常得到响应的数据 .. 比如我们先停止运行的服务 .. 刷新一下小程序页面 .. 现在小程序会显示空白的页面 .. 我们可以准备一个错误页面 .. 在发生错误的时候显示它..

现在应用里的 fetchData 方法里会去请求服务接口 .. 可以把这些代码放在一个 try catch 区块里面 .. 把正常要执行的代码放在 try 里面 ..

catch 区块可以截获发生的错误 ..

在 response 里面 .. 把 statusCode 拿出来 .. 它是响应里的状态码 .. 然后再用一个 switch 区块 .. 检查一下 statusCode 它的值 .. 添加一种情况 .. 如果状态码的值是 200 ,表示成功得到了响应 ..

这个时候可以执行一下设置组件状态的动作 .. break .. 你可以继续判断其它的状态码,然后做出相应的动作 ..

这里我直接添加一个默认的行为 .. 如果状态码不是 200,就去 throw 一个 Error .. 错误信息是 .. 出错了! 再 break 一下 ..

发生错误,在 catch 里可以得到 .. 这里我们用 this.setState 设置一下页面状态 .. 去把 serviceError 的值设置成 true ..

在这个页面的状态里面,再添加一个 serviceError .. 让它默认等于 false ... 请求接口发生错误它的值就会变成 true ..

然后找到页面的 render 方法 .. 可以先剪切一下这块视图 .. 在 render 里面,添加一个 page .. 一个 View ... 包装一下正常页面上要显示的内容 ..

下面再添加一个 errorPage ... 表示错误页面 .. 一个 View ,上面加上 page-demo .. 文字是 服务出现问题,请稍后再试。

再把 serviceError 从组件的 state 里拿出来 ..

到底是显示正常页面还是错误页面可以做一下判断 .. 如果发生错误 .. serviceError .. 就显示错误页面 errorPage .. 不然就显示正常页面 .. 就是 page ...

现在模拟器上会显示 服务出现问题,请稍后再试。 因为应用需要的服务再在不可用 .. 重新运行一下应用的服务 ..

再刷新一下页面 .. 请求接口正常得到了数据,就会显示这些数据 ..

请求接口失败时显示错误页面《 电商小程序案例:内容分页 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点