博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
axios拦截设置和错误处理
阅读量:4493 次
发布时间:2019-06-08

本文共 2991 字,大约阅读时间需要 9 分钟。

目前想出的处理接口请求进行全局错误提示 的最佳方案,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 {            // 请求错误的情况,一般不需要特殊处理,因为已经在全局设置了错误提示          }        });    }

转载于:https://www.cnblogs.com/XHappyness/p/11429526.html

你可能感兴趣的文章
随笔1
查看>>
Firebug入门指南
查看>>
POJ Minimum Cut
查看>>
仿射变换
查看>>
【ASP.NET】复制单个文件同时到多个目录
查看>>
上机实验2.。实验报告
查看>>
Jquery Validate 相关参数及常用的自定义验证规则
查看>>
java8 base64使用
查看>>
使用eclipse学习java第二课
查看>>
Codeforces Round #469 (Div. 2)
查看>>
go简单模拟Redis数据库对应{key, value}的存取功能
查看>>
vue.js 弹层
查看>>
JavaScript:Number 对象
查看>>
事务同步多线程
查看>>
怎么去掉联系人、通话记录、拨号列表界面中的电话号码中间的空格?
查看>>
node.js常见的一些错误信息
查看>>
PG自动化测试
查看>>
MySQL启动出现The server quit without updating PID file错误解决办法
查看>>
什么是多租户
查看>>
jQuery的效果
查看>>