目前想出的处理接口请求进行全局错误提示 的最佳方案,axios整体配置如下

1.基于axiso.interceptors进行响应拦截: 主要负责全局提示错误

axios.interceptors.request.use(
config => {
config.timeout = 30000;
return config;
},
err => {
return Promise.reject(err);
}
)
axios.interceptors.response.use(
response => {
// 根据后端约定,response.data形式为{success:boolean, message:string, content:any}
if (response.data.success) {
return response.data
} else {
iView.Notice.error({
title: '错误',
desc: response.data.message
})
Promise.reject(response.data.message)
}
},
error => {
if (error.response) {
if (error.response.status === 401) {
// 这种情况一般调到登录页
} else if (error.response.status === 403) {
// 提示无权限等
} else {
// 其他错误处理
}
}
return Promise.reject(error.response.data)
}
)

2. 封装axios方法(比如get)

主要负责将所有的结果(包括错误)都通过reslove来处理,这样下一级直接then就可以得到所有的结果,而且使用await语法使,不需要try..catch...

	axiosGet: (url, config, showLoading = true) => {
if (showLoading) {
return new Promise((resolve, reject) => {
iView.LoadingBar.start()
axios.get(url, config)
.then(data => {
resolve(data)
iView.LoadingBar.finish()
}).catch((error) => {
resolve()
iView.LoadingBar.error()
})
})
} else {
return new Promise((resolve, reject) => {
axios.get(url, config)
.then(data => {
resolve(data)
}).catch((error) => {
resolve()
})
})
}
}

3. 封装一个接口:

export default {
getList: (config) => getService(`/api/getList`, config)
}

4. main.js注册:

import service from '@/service'
Vue.prototype.$service = service

5.调用接口

    async getList() {
// 1.使用await
// 第2步封装axios方法时,对于错误情况,即catch内:resolve();
// 所以这里不需要try···catch···来使用await;这里如果res不为空,说明是正确接收数据的情况
this.loading = true;
let res = await this.$service.getList({
pageNum: this.page.current,
pageSize: this.page.size
});
this.loading = false;
if (res) {
// 此种情况说明请求成功
} else {
// 请求错误的情况,一般不需要特殊处理,因为已经在全局设置了错误提示
}
}, getList2() {
// 2.使用then
// 第2步封装axios方法时,对于错误情况,即catch内:resolve();
// 所以这里then可以接收到正确和错误的结果,不需要再使用catch接受错误情况;这里如果res不为空,说明是正确接收数据的情况
this.loading = true;
this.$service
.getList({
pageNum: this.page.current,
pageSize: this.page.size
})
.then(res => {
this.loading = false;
if (res) {
// 此种情况说明请求成功
} else {
// 请求错误的情况,一般不需要特殊处理,因为已经在全局设置了错误提示
}
});
}

axios拦截设置和错误处理的更多相关文章

  1. vue使用jsx/axios拦截器设置

    最害怕的就是做过的事情,转几天又忘记了:写过的代码,也模模糊糊不知道哪里去了,所以告诉自己最好把每天遇到的问题记录下来,好,开始. 新公司要搭个vue后台框架,所以用了简简单单的 vue+iview+ ...

  2. vue中 请求拦截 响应拦截设置

    第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...

  3. axios拦截器的使用方法

    很多时候我们需要在发送请求和响应数据的时候做一些页面处理,比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header,或者在请求到数据之前页面显示loading等等,还 ...

  4. 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +

    (1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...

  5. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  6. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  7. Vue学习手记09-mock与axios拦截的使用

    01.安装 安装mock npm install mockjs 安装axios npm install axios 02.新建一个config.js文件做axios拦截 import axios fr ...

  8. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  9. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

随机推荐

  1. Java序列化及反序列化

    序列化概念: 1.Java序列化与反序列化  Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程. 2.为什么需要序列化与反序列化 我们知道 ...

  2. PHP curl_multi_close函数

    curl_multi_close — 关闭一组cURL句柄 说明 void curl_multi_close ( resource $mh ) 关闭一组cURL句柄. 参数 mh 由 curl_mul ...

  3. SGU 176 (有源汇最小流)

    转载:http://blog.csdn.net/dan__ge/article/details/51207951 题意:n个节点,m条路径,接下来m行a,b,c,d,如果d等于1,则a到b的流量必须为 ...

  4. 集训队8月3日(A*+IDA*)

    刷题数:4 今天看书看了A*与IDA*,算法竞赛入门经典124~133页. 先说一下看书后对知识点的认识,A*算法就是设计一个估价函数,附加到其优先队列的权值比较中,然后还是得到目标状态的解.值得一提 ...

  5. 01 【零基础入门】html学习笔记(1)

    之前学习了前端的一些基础知识,现在想深入地.精通地学习前端,往前端和全栈工程师方向发展. 之前学习前端主要是通过看视频,结合动手练习.现在认为看书+视频+实践,应该是最高效的学习方法.对于html.c ...

  6. 【c#技术】一篇文章搞掂:Newtonsoft.Json Json.Net

    一.介绍 Json.Net是一个.Net高性能框架. 特点和好处: 1.为.Net对象和JSON之间的转换提供灵活的Json序列化器: 2.为阅读和书写JSON提供LINQ to JSON: 3.高性 ...

  7. python中将12345转换为'12345',不要使用str

    a = 12345 #创建一个空字符串 ret = "" #whlie循环,条件为当a为true时,即a不是 0的时候 while a : #定义一个变量,对a求余 last = ...

  8. html常用代码

    <marquee width="70%" scrollamount="2">大家好</marquee>    // 大家好 字符从左到右 ...

  9. Oracle 11g 的卸载

    Oracle 11g 的卸载 停止 oracle 相关的所有服务. 使用 Oracle 自带的 Universal Installer 卸载工具卸载 Oracle. 删除注册表 HKEY/LOCAL_ ...

  10. Jmeter 5.1 从excel读取数据执行接口自动化

    思路:数据在excel文件中进行维护,然后转换成csv格式,jme中读取数据执行: 1.将接口各数据在excel文件中进行维护,然后存为csv格式,我的数据如下: 2.jmeter脚本,配置csv文件 ...