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)
})
ios 请求失败封装_vue_axios请求封装、异常拦截统一处理相关推荐
- axios请求失败,重试请求
因项目原因,需要在请求失败时重新请求数据,确保必须拿到数据 基于Vue2+,axios 先封装axios请求,必须设置请求超时如下: 封装重试请求函数: // 重新请求 function tautol ...
- vue_axios请求封装、异常拦截统一处理
1.前端网络请求封装.异常统一处理 vue中采用axios处理网络请求,避免请求接口重复代码,以及各种网络情况造成的异常情况的判断,采用axios请求封装和异常拦截操作: axios 请求封装 // ...
- python 大量网络请求失败_网络请求异常拦截优化
public class ExceptionUtils { /* * 在使用Retrofit+RxJava时,我们访问接口,获取数据的流程一般是这样的:订阅->访问接口->解析数据-> ...
- axios请求失败重新发起请求_axios请求超时,设置重新请求的完美解决方法
自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, ...
- axios请求失败重新发起请求_vue axios请求超时,设置重新请求的完美解决方法
//在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...
- ios 请求失败封装_iOS重构-轻量级的网络请求封装实践
前言 在十分钟搭建主流框架_简单的网络部分(OC)中,我们使用AFN框架顺利的发送网络请求并返回了有用数据,但对AFN框架的依赖十分严重,下面我们重构一下. 初步 很多时候,我们涉及到网络请求这块,都 ...
- iOS项目中的网络请求和上下拉刷新封装
代码地址如下: http://www.demodashi.com/demo/11621.html 一.运行效果图 现在的项目中不可避免的要使用到网络请求,而且几乎所有软件都有上下拉刷新功能,所以我在此 ...
- iOS 项目中 网络请求Alamofire 的二次封装
iOS 项目中 网络请求Alamofire 的二次封装 1.先创建 网络请求的工具类 NetWorkTool 继承自NSObject class NetWorkTool: NSObject {} 2. ...
- IOS开发基础之网易新闻环境搭建异步请求json,AFN网络封装第1天
IOS开发基础之网易新闻环境搭建异步请求json,AFN网络封装第1天 视频资料是2015年的,但是AFN是导入框架的关键文件,我尝试使用cocoapods安装最新的AFN,虽然成功了,但是版本太高, ...
最新文章
- 赔偿 525 万?联想前副总裁跳槽小米仲裁案后续,常程不服提起诉讼
- Go语言基础之数据类型
- halcon get_image_pointer1获取图像指针
- React开发(232):传参可以转变思路
- “夺笋呐”!会员隐私随便看 诈骗就当没看见,中国最大婚恋网站紧急回应
- 编程猫海龟编辑器python_海龟编辑器下载
- 1组第一次作业-小组自我介绍
- linux CentOS7最小化安装环境静默安装Oracle11GR2数据库(修改配置文件)
- C语言--------学生管理系统(源代码)
- python客户端软件开发_用 Python 实现一个简易版 HTTP 客户端
- fragstats4.2使用
- linux gst qt,c – 致命错误:gst / gst.h:没有这样的文件或目录(使用CMake)
- 推荐 10 个好用的 JavaScript 代码压缩工具
- 简洁易用的日志模块——log4j
- MIN-MAX归一化
- 图片转world文档 Excel excel 新
- 每日站会并不是只是站在开会就行了:每日站会范例
- 主链数据动荡;以太坊平均确认时间大幅度降低;BTC活跃地址数连续两周上升 | 数据周榜
- 简单的flask+nginx项目助你开阔思路
- 点关于直线的距离、垂足、对称点公式
热门文章
- cropper基本用法
- pb怎么设置 allow editing_Deno TCP Echo Server 是怎么运行的?
- dell服务器怎么看硬件状态,从DELL 2950和DELL R710看服务器硬件
- 记录一种多个按钮中每次只能选中一个的实现方式
- 网格变形动画MeshTransform
- jq之slidedown()
- ext 如何判断是否是整数_Excel表格技巧—如何用ISNUMBER判断是否是数值
- android摄像头矩形框提取_视频图像摄像头跟踪的上位机系统设计
- java+set+split_阿里资深工程师教你如何优化 Java 代码!
- html设置一个随机数的抽奖,随机数的运用---抽奖