ios 请求失败封装_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)

})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux基础(使用ssh服务管理远程主机1)

配置网络参数 使用nmtui命令配置网络参数,以及通过nmcli命令查看网络信息并管理网络会话服务。 执行nmtui命令运行网络配置工具 进入主界面 选中编辑连接并按下回车键 选中要编辑的网卡名称,然后按下Edit(编辑)按钮 把网络IPv4 …

联想g510升级方案_联想智慧中国行,聚焦第一古城,助力企业智能升级

12月29日,联想智慧中国行“一起联想 生态绽放”One Lenovo融合品鉴会邢台站盛大启幕,现场近70位河北合作伙伴到场参会,共同探讨智能时代带来的多重挑战和迎战机遇。“联想智慧中国行”是联想致力于推动中国行业智能化升级举办的系列活动&…

软件工程(总体设计②设计原理)

设计原理 模块化 模块是由边界元素限定的相邻程序元素的序列,而且有一个总体标识符代表它。 按照模块的定义,过程、函数、子程序和宏,都可作为模块。 面向对象方法学中的对象是模块,对象内的方法也是模块。模块是构成程序的基…

TensorFlow构建二维数据拟合模型(3)

占位符与数据喂入机制 placeholder是TensorFlow提供的占位符节点,由tf.placeholder()函数创建,其实质上也是一种变量。占位符没有初始值,只会分配必要的内存,其值由会话中用户调用的run()函数传递。 占位符声明的方法如表 函数…

合作开发过程产生的专利_被起诉专利侵权怎么办?专利律师给你出招!

随着国内企业专利申请量的增加及专利保护意识的逐步提升,专利侵权诉讼作为常用的商业竞争手段和策略,其数量也随之呈逐年递增之势。考虑到目前国内专利数量较多,且很多专利技术互有交叉,因此在进行产品研发时即使未借鉴他人产品&a…

idea怎么设置代码提示不区分大小写_IntelliJ IDEA 这样设置动图,棒极了!

转自:IntelliJ-IDEA-Tutorial/Judas.n链接:http://suo.im/6sHdelIntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它。推荐设置IntelliJ IDEA 的代码…

linux课堂笔记(1)

一、linux特点 1.源代码开发: *.c *.h 可二次开发 2.安全:可检测安全性 3.稳定:共享内存 内存冲突(Windows,内存冲突,蓝屏死机) 4.网络服务:server(WWW&#xf…

表字段顺序有何影响_「品味保定」炸烹虾段乾隆赞 百年保定柔雅香

【引文】上溯先贤尧帝,保定传承已逾千载。燕赵之地、畿辅之疆、北控三关、南通九省、翅卫京师说的就是古城保定。千百年来,古城保定形成了独具特色的饮食文化,精致气派的直隶官府菜就是这种文化的结晶。品百年保定酒,尝直隶官府菜…

linux课堂笔记(2)

linux安装 1,虚拟机:VMware12 (1)注册:商业软件(集成序列号,注册机(根据加密算法生成序列号),文本文件(记录序列号)) &…

testufo测试刷新率测试_上手体验微星电竞显示器PAG301CR:200Hz高刷新率只是它的小亮点...

电子竞技行业高速发展,逐渐成为体育产业版图中重要的一块,产业链也在不断完善,人们对于电子竞技的认识也是越来越深刻,同时越来越多的人加入了电子竞技行列中,但是电竞游戏除了水平外,设备同样也尤其重要,特…

linux课堂笔记(3)

1,linux厂商版本信息 内核信息:主版本.修正号.发行号.on 硬件平台. 主机名 登录 身份认证 localhost login:root password:隐藏口令 提示上一次登录时间与地点 用户名主机名 当前目录 指令提示符 rootlocalhost ]# 注&…

graphpad做折线图坐标轴数字_pandas做数据可视化具体操作,快来看看吧

来自公众号:大邓和他的Python常见的数据可视化库有:matplotlib 是最常见的2维库,可以算作可视化的必备技能库,由于matplotlib是比较底层的库,api很多,代码学起来不太容易。seaborn 是建构于matplotlib基础上&#xff0…

linux课堂笔记(4)

常用指令:mv 1,隐藏文件 (1)windows通过设置属性隐藏文件 attrib h s 文件 attrib h s d:\net.txt attrib h s d:\net.txt (2)linux系统文件以点开始命名隐藏文件 mv /路径/源文件 /路径/目标…

实现输入提示 layui_ASP.NET Core SignalR :学习消息通讯,实现一个消息通知

什么是 SignalR目前我用业余时间正在做一个博客系统,其中有个功能就是评论通知,就是假如A用户评论B用户的时候,如果B用户首页处于打开状态,那么就会提示B用户有未读消息。暂时用SignalR来实现这个功能。我也是看了两天的资料才明白…

linux课堂笔记(5)

vi编辑器 1,vi版本:vi —— vim ps:查看进程 进程 ID 时间 终端 进程名称 ps -t 终端(查看指定终端进程) vi 回车(提示vi版本信息) 2,vi特点 (1)…

两个字和三个字一样宽_武汉国庆出行 记好三个字

武汉国庆出行国庆黄金周带你一起见证奇迹乐在武汉国庆去哪儿玩?记住:三 个 字欢乐谷记住【欢乐谷】三个字,你就不会迷路!不算白来。欢乐谷有啥好?免费!国庆期间,欢乐谷面向全国人民免费开放&…

linux课堂笔记(6)

设置文件访问权限: 1,通过字母设置:参数 字母 (1)用户类型: u 拥有者 g 同组用户 o 其他用户 a所有用户 (2)权限:r 读 w 写 x执行 注:目录权…

什么标签用于在表单中构建复选框_UI/UX笔记之如何设计好表单

原文链接:UI/UX笔记之如何设计好表单 | 须臾所学免费设计资源网​presentationvip.com无论是注册流程,多视图步骤程序还是单调的数据输入界面,表单都是数字产品设计中最重要的组成部分之一。本文重点介绍表单设计的常见事项。请记住&#xff…

linux课堂笔记(7)

编译器&#xff1a;gcc 格式&#xff1a;gcc [参数] <源程序> gcc test.c 注&#xff1a;默认生成可执行程序a.out&#xff08;windows默认test.exe&#xff09; ./a.out gcc -o 可执行文件 源程序 gcc -o test.exe test.c&#xff08;windows&#xff09; g…

mqtt 发送消息过多_阿里云MQTT服务端注解式消息处理分发与同步调用实践小结

一、前言前段时间公司预研了设备app端与服务端的交互方案&#xff0c;出于多方面考量最终选用了阿里云的微服务队列MQTT方案&#xff0c;基于此方案&#xff0c;本人主要实践有&#xff1a;1. 封装了RocketMQ实现MQTT订阅与发布的实现细节&#xff1b;2. 实现了注解式分发处理&…