使用inteceptor拦截器

本文介绍了如何使用Interceptor拦截器来改进用户体验。在请求发送前后,拦截器可以用来处理响应,如在响应状态为404时展示友好的错误界面,或者在发送请求时显示loading,接收响应后隐藏。通过具体的示例1和示例2,展示了如何添加loading组件,并在用户操作长时间无反馈或遇到错误时,提供适当的提示和处理。
摘要由CSDN通过智能技术生成

拦截器可以在请求发送前和发送请求后做一些处理。
在这里插入图片描述
基本用法

Vue.http.interceptors.push((request, next) => {
        // ...
        // 请求发送前的处理逻辑
        // ...
    next((response) => {
        // ...
        // 请求发送后的处理逻辑
        // ...
        // 根据请求的状态,response参数会返回给successCallback或errorCallback
        return response
    })
})

在response返回给successCallback或errorCallback之前,你可以修改response中的内容,或做一些处理。
例如,响应的状态码如果是404,你可以显示友好的404界面。

示例1

之前的CURD示例有一处用户体验不太好,用户在使用一些功能的时候如果网络较慢,画面又没有给出反馈,用户是不知道他的操作是成功还是失败的,他也不知道是否该继续等待。
通过inteceptor,我们可以为所有的请求处理加一个loading:请求发送前显示loading,接收响应后隐藏loading。

具体步骤如下:
1.添加一个loading组件

<template id="loading-template">
    <div class="load
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值