目标:统一在每次请求后台时,添加 loading 效果
背景:有时候因为网络原因,一次请求的结果可能需要一段时间后才能回来, 此时,需要给用户 添加 loading 提示。
添加 loading 提示的好处:
- 节流处理:防止用户在一次请求还没回来之前,多次进行点击,发送无效请求
- 友好提示:告知用户,目前是在加载中,请耐心等待,用户体验会更好
实操步骤:
-
请求拦截器中,每次请求,打开 loading
// 自定义配置 - 请求/响应 拦截器 // 添加请求拦截器 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 // 开启loading,禁止背景点击 (节流处理,防止多次无效触发) Toast.loading({ message: '加载中...', forbidClick: true, // 禁止背景点击 loadingType: 'spinner', // 配置loading图标 duration: 0 // 不会自动消失 }) // 只要有token,就在请求时携带,便于请求需要授权的接口 const token = store.getters.token if (token) { config.headers['Access-Token'] = token config.headers.platform = 'H5' } return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) })
-
响应拦截器中,每次响应,关闭 loading
-
请求时,打开 loading
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么 (默认axios会多包装一层data,需要响应拦截器中处理一下)
const res = response.data
if (res.status !== 200) {
// 给错误提示, Toast 默认是单例模式,后面的 Toast调用了,会将前一个 Toast 效果覆盖
// 同时只能存在一个 Toast
Toast(res.message)
// 抛出一个错误的promise
return Promise.reject(res.message)
} else {
// 正确情况,直接走业务核心逻辑,清除loading效果
Toast.clear()
}
return res
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error)
})
如果需要多个Toast,则需要配置,但一般不用