00:00
哈喽,大家好,这一个小节我们来讲一下阿贾克斯请求超时的控制以及网络异常处理。我们的项目呢,在项目上上线之后呢,在运行过程当中,一定会出现呢,网络请求超时的一个情况。我们不能够保证服务端呢永远能够及时快速响应。那么这个时候我们可以通过对阿贾克斯做一个超时的设置,然后给用户呢来一个提醒。并且在网络异常的时候呢,也给用户来一个友好的提醒。这样一类的话呢,把产品做的体验更好一些。好了,我们接下来的话演示一下。在这儿呢,依然采用的是点击。然后把结果呢做一个呈现,我们首先先点开浏览器来看一下这个页面。点击这个按钮呢,向服务端发请求。然后呢,服务端返回结果。我们加一个超时设置时间,我们定为两秒。
01:00
如果两秒钟之后呢,还没有返回结果,那我们就给用户呢来一个提醒。告诉他网络超时,请稍后重试。好,我们来把效果做一下。在这的代码呢,我们不打算再自个儿再写一遍了,因为前边我们已经写过好几遍架基本操作流程了。所以说在这呢,我们把代码复制一份。把IE缓存代码拿过来。拿过来之后,把里边一些内容呢,咱们更改一下,比如说。这个元素获取这块咱们也得拿过来啊。来。然后呢,把下边一些代码咱们变更一下,比如说给谁发请求,这个咱们需要变化一下。在发起用这一块的话,咱们准备再次再次去创建一个规则。把它复制一份。拿过来。做一个延时响应。
02:03
啊,因为咱们说了要有有一个两秒的一个延时设置,那我们服务端在返回结果的时候呢,也需要加一个这样的延时才能看到效果,要不然的话呢,我们就看不到一个最终结果了。我把这个代码的话,上边这个地方留着,下边这个地方。上面加一个定时器。然后在这,然后set time out。我们这儿来一个三秒钟。也就是说呢,我三秒钟之后呢,再把这个结果返回给客户端。里边呢,咱们拿点东西啊。写点东西,这是来一个延时响应。啊,保存。呃,先把代码呢,先注掉。待会儿呢再看啊,咱们先来看,直接看这个结果。然后至于路径这块的话,咱们这块来换一下啊,叫做底类。这块呢,也叫做delay。
03:00
可以了,哎,看效果怎么样,刷新页面,然后点击点击OK,结果没有出来,结果没有出来没有关系啊,我们首先先打开控制台,看有没有报错。刷新,然后点击。看一下这块来了一个什么呢?哎,这个报错。没关系啊,咱们这单词应该写错了。切过来。重新来点击。看一下结果已经回来了,这是一个没有加任何延时控制的一个效果,我们现在的话把它加一个延时。保存你再看结果点击123出。好,来了。然后呢,这个时候呢,我们在前端的阿贾克斯设置这块呢,加一些代码。增加一个。超时设置。超时。啊,怎么设置呢?XR.timeout。等于一个来一个2000。我加一个两秒的一个。啊,设置。
04:01
就是说两秒钟之内,如果说还没有结果。啊,那我们这个,那我们这个请求就取消。看一下啊,刷新页面,点开network,然后点击一二走,你看这就显示cancel的。开锁表示是取消的意思,因为两秒了还没有结果回来,我们这时候啊,就把结果做一个做请求做一个取消。那么这时候的话,咱们还可以再加一个什么呢?加一个超时的回调。超时回调。OKXR.on time out。啊,这里边儿来一个alert网络异常。啊,请稍后重试。稍后重试。保存切过来,刷新页面,点击一二弹框来看一下网络异常,当然在这的话,我们使用的alert啊,在实际场景里边,我们可能会选择一些更加友好的方式,比如说一些div或者遮罩层等等的方式去做一个显示,这样体验会更好一些。
05:08
这是当前呢,我们对。请求超时做一个演示,下边呢,还有另外一个就是网络异常也可以加一个回调啊。网络异常的一个回调设置。XHR.un error。然后发射。然后alert,然后你的网络。似乎。出了一些问题。也是来一个提醒。存,那么这个效果咱们怎么去演示呢?我们可以借助于Chrome浏览器,它网络这块的一个设置,大家看这有一个online点击啊,当然我这得先刷新一下页面,为什么呢?因为咱们的页面已经内容发生了改变了啊,所以说我呢需要先刷新一下。然后点击。点到那个奥莱,奥莱的话就是断网,没有网,点击这你试一试走。
06:00
啊,你的网络似乎出现了一些问题。这样的话呢,我们可以直接给用户来个提醒啊,告知用户呢,你的网络可能出现一些问题,请检查你的网络,也是给用户做一个友好的提醒。好,那么这个小节呢,关于啊。阿贾克斯请求超时以及网络异常的一个操作,我们就先说这么多。
我来说两句