vue_axios请求封装、异常拦截统一处理
1、前端网络请求封装、异常统一处理
vue中采用axios处理网络请求,避免请求接口重复代码,以及各种网络情况造成的异常情况的判断,采用axios请求封装和异常拦截操作;
axios 请求封装
// 引入axios文件包
import axios from 'axios'
// POST 方法封装 (参数处理)
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: url,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
// POST 方法封装 (文件上传)
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: url,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
// GET 方法封装
export const getRequest = (url) => {
return axios({
method: 'get',
url: url
});
}
// PUT 方法封装
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: url,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
// DELETE 方法封装
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: url
});
}
2)axios请求异常统一处理
// 引入依赖包
import axios from 'axios'
import {Message} from 'element-ui'
// REQUEST 请求异常拦截
axios.interceptors.request.use(config=> {
//========== 所有请求之前都要执行的操作 ==============
return config;
}, err=> {
//================== 错误处理 ====================
Message.error({message: '请求超时!'});
return Promise.resolve(err);
})
// RESPONSE 响应异常拦截
axios.interceptors.response.use(data=> {
//============== 所有请求完成后都要执行的操作 ==================
// 第一种方式
// 根据返回的code值来做不同的处理(和后端约定)
switch (data.code) {
case '0':
// exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题
if (isIOS()) {
// 异步以保证数据已渲染到页面上
setTimeout(() => {
// 通过滚动强制浏览器进行页面重绘
document.body.scrollTop += 1
}, 0)
}
// 这一步保证数据返回,如果没有return则会走接下来的代码,不是未登录就是报错
return data
// 需要重新登录
case 'SHIRO_E5001':
// 微信生产环境下授权登录
if (isWeChat() && IS_PRODUCTION) {
axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
location.replace(global.decodeURIComponent(result))
})
} else {
// 否则跳转到h5登录并带上跳转路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login`)
}
// 不显示提示消息
data.description = ''
break
default:
}
// 若不是正确的返回code,且已经登录,就抛出错误
const err = new Error(data.description)
err.data = data
err.response = response
// 第二种方式,仅对200和error状态处理
if (data.status && data.status == 200 && data.data.status == 'error') {
Message.error({message: data.data.msg});
return;
}
return data;
}, err=> {
//============== 错误处理 ====================
if (err && err.response) {
switch (err.response.status) {
case 400: err.message = '请求错误(400)'; break;
case 401: err.message = '未授权,请重新登录(401)'; break;
case 403: err.message = '拒绝访问(403)'; break;
case 404: err.message = '请求出错(404)'; break;
case 408: err.message = '请求超时(408)'; break;
case 500: err.message = '服务器错误(500)'; break;
case 501: err.message = '服务未实现(501)'; break;
case 502: err.message = '网络错误(502)'; break;
case 503: err.message = '服务不可用(503)'; break;
case 504: err.message = '网络超时(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `连接出错(${err.response.status})!`;
}
} else {
err.message = '连接服务器失败!'
}
Message.err( {message: err.message } )
return Promise.resolve(err);
})
请求出错的时候我执行的是:Promise.resolve(err);,而不是Promise.reject(err);,这样无论请求成功还是失败,在成功的回调中都能收到通知
2、VUE 项目中使用该方法
1)在main.js中导入所有请求方法
// 导入所有请求方法
import {getRequest} from './utils/api'
import {postRequest} from './utils/api'
import {deleteRequest} from './utils/api'
import {putRequest} from './utils/api'
2)将请求方法添加至 Vue.prototype 上
// 向VUE的原型上添加请求方法
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
3)发送请求(请求方法的调用)
// 发送网络请求
this.postRequest('/login', {userName,password}).then(resp=> {
...
}
});
4)案例
import Vue from 'vue'
import cypressIndex from '../components/rootVue/cypressIndex'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// axios请求的方法引入
import {getRequest} from '../components/utils/settings'
import {postRequest} from '../components/utils/settings'
Vue.use(ElementUI);
// 将axios方法添加到VUE原型上
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#cypressIndex',
render: h => h(cypressIndex)
})
vue_axios请求封装、异常拦截统一处理的更多相关文章
- angular cli http请求封装+拦截器配置+ 接口配置文件
内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...
- axios请求封装和异常统一处理
前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...
- axios对请求各种异常情况处理的封装
前端网络请求封装 前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了 ...
- SpringBoot2.0针对请求参数@RequestBody验证统一拦截
title: "SpringBoot2.0针对请求参数@RequestBody验证的统一拦截"categories: SpringBoot2.0 Shirotags: Spring ...
- @ControllerAdvice 拦截异常并统一处理(转载)
在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@Requ ...
- springmvc请求参数异常统一处理,结合钉钉报告信息定位bug位置
参考之前一篇博客:springmvc请求参数异常统一处理 1.ExceptionHandlerController package com.oy.controller; import java.tex ...
- 二次封装axios,根据参数来实现多个请求多次拦截
1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let Cancel ...
- flutter dio网络请求封装实现
flutter dio网络请求封装实现 文章友情链接: https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...
- 基于.Net Framework 4.0 Web API开发(3):ASP.NET Web APIs 异常的统一处理Attribute 和统一写Log 的Attribute的实现
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是项目,总有异常发生,本节就来谈谈API的异常 ...
随机推荐
- collectd+influxDB+Grafana搭建性能监控平台
网上查看了很多关于环境搭建的文章,都比较久远了很多安装包源都不可用了,今天收集了很多资料组合尝试使用新版本来搭建,故在此记录. 采集数据(collectd)-> 存储数据(influxdb) - ...
- 改代码不是很熟悉------方法上加入synchronized关键字,会有性能问题---如何改善
package com.bjpowernode.t14; import java.time.Duration;import java.time.LocalTime; public class Proc ...
- 使用事件的preventDefault()方法改变默认行为
事件有属性,还有方法,还有事件.事件本身是个对象^_^ 事件的preventDefault()方法改变默认行为,在事件发生前阻止,不让其发生.这样的应用场景有很多,常见表单验证,如必填字段不能为空. ...
- 【C++ Primer 第11章】2. 关联容器操作
练习答案 一.访问元素 关联容器额外类型别名 key_type 此容器类型的关键字类型 mapped_type 每个关键字关联的类型,只 适用于map mapped_type 对于set,与key_ ...
- 【C++ Primer 第11章 练习答案】2. 关联容器概述
11.2.1节练习 [练习11.7]代码: #include<iostream> #include<string> #include<vector> #includ ...
- Codeigniter使用HMVC(一)
涉及三方代码: https://tutorials.kode-blog.com/codeigniter-admin-panel https://bitbucket.org/wiredesignz/co ...
- poj 1789 每个字符串不同的字母数代表两个结点间的权值 (MST)
题目大意是就是给出n个长度为7的字符串,每个字符串代表一个车,定义车的距离是两个字符串间不同字母的个数,题目要求的数不同的车的距离的最小值,即所求的就是最小生成树 Sample Input 4aaaa ...
- springmvc文件上传下载简单实现案例(ssm框架使用)
springmvc文件上传下载实现起来非常简单,此springmvc上传下载案例适合已经搭建好的ssm框架(spring+springmvc+mybatis)使用,ssm框架项目的搭建我相信你们已经搭 ...
- #7 //[CQOI2014]和谐矩阵
题解: bitset优化高斯消元 无关变量为1 #include <bits/stdc++.h> using namespace std; #define eps 1e-9 #define ...
- CentOS root用户修改密码
1.root用户修改密码: #passwd -------------------------------- 参考资料: 1.Centos修改root密码:http://blog.163.com/wz ...