axios对请求各种异常情况处理的封装方法(2)

1.直接在request的拦截器中开启一个fullscreen的loading，然后在response的拦截器中将其关闭，即我将进度条也封装到工具js中了，但是非常不推荐这种方式，因为这种方式的用户体验非常之差，有兴趣的小伙伴可以自己试一下就知道了。

2.第二种解决方案就是大家看到的，我返回一个Promise.resolve(err)，则这个请求不会就此结束，错误的message我已经弹出来了，但是这条消息还是会继续传到then中，也就是说，无论请求成功还是失败，我在成功的回调中都能收到通知，这样我就可以将loading关闭了，比如下面这个登录请求：

var _this = this; this.loading = true; this.postRequest('/login', { username: this.loginForm.username, password: this.loginForm.password }).then(resp=> { _this.loading = false; if (resp && resp.status == 200) { _this.getRequest("/config/hr").then(resp=> { if (resp && resp.status == 200) { var data = resp.data; _this.$store.commit('login', data); var path = _this.$route.query.redirect; _this.$router.replace({path: path == 'https://www.jb51.net/' || path == undefined ? '/home' : path}); } }) }

添加Vue插件

由于我对axios进行了封装，因此在每一个需要使用axios的地方，都需要导入相应的请求，略显麻烦，参考https://cn.vuejs.org/v2/guide/plugins.html，我将请求方法挂到Vue上，具体操作如下：

1.在main.js中导入所有的请求方法，如下：

import {get} from './utils/api' import {postRequest} from './utils/api' import {deleteRequest} from './utils/api' import {putRequest} from './utils/api'

2.把它们添加到 Vue.prototype 上，如下：

Vue.prototype.getRequest = getRequest; Vue.prototype.postRequest = postRequest; Vue.prototype.deleteRequest = deleteRequest; Vue.prototype.putRequest = putRequest;

如此之后，以后再需要发送网络请求，就不需要导入api了，直接通过下面这种方式即可：

Post方法：

this.postRequest('/login', { username: this.loginForm.username, password: this.loginForm.password }).then(resp=> { ... } });

GET方法：

_this.get( this.url_s+"/Notice/findTotalCount",{ userId:localStorage.getItem("userid"), openId: localStorage.getItem('openId') } ) .then(function(res) { // })

以上这篇axios对请求各种异常情况处理的封装方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: