D2 AJAX 封装策略
前言
如果你做的是比较大型的项目,有非常非常多的api需要做配置和维护,那么下面这篇文章可能就可以帮助你啦~
思想架构
用的是promise机制处理,将一次请求分成了三段: 页面 —— Vuex —— axios实例 其中,Vuex
调用axios实例
时还会用到api配置文件。
api配置文件的作用之后会说明。
整个流程:页面
触发Vuex
的actions,对应把需要的参数传过去,Vuex
再调用axios实例
,把对应的api配置和参数传到axios实例
:
- 对于统一的http错误以及业务错误可以在
axios实例
做拦截处理。 - 对于数据的改动在Vuex做处理【可能对应有些视图会发生更新】
- 对应页面本身的一些变量的操作。
具体实现
构造两个axios实例:serverIn和serverOut,我把这两个实例这样处理:
Vue.prototype.$ajax = serviceIn
Vue.prototype.$axios = serviceOut
复制代码
其中$axios部分不说,不过我把作者的response
删掉了……
考虑到有时候还是需要用到headers之类的信息。
来看看serviceIn如何使用:
this.$ajax({...api['login'],data
}).then...
复制代码
那这里一定很好奇api['login']
是什么吧?
export default {login: {url: baseApi + '/login',method: 'post',contentType: 'normal'}
}
复制代码
这是我api文件下一个app里的部分代码:
- baseApi是基础接口,相同的一类可以统一配置到一起;
- contentType是我自定义的,在request做对应的处理
然后把关于这个接口所有和业务无关的但是和服务器请求有关的配置都可以丢到这。
- 接口地址
- method方法
- contentType
- responseType
- ...
我这样做的目的是把与后端对接的api文档通过配置表的方式结合起来,作为前端配置和查阅使用。
serverIn
对应的是公司内的请求,可以和后端商量定义好一些规范:
request
- 主要是Content-Type的定义,如果有多种……
- axios在data方面需要做一层处理:
const qs = require('querystring')
// request interceptor
serviceIn.interceptors.request.use(config => {// 如果是'application/x-www-form-urlencoded',需要做特殊的处理config.headers['Content-Type'] = 'application/x-www-form-urlencoded'config.data = qs.stringify({...config.data})
}, error =>{}
复制代码
reponse
- HTTP状态错误码的错误规范,例如服务器更新
- 业务范围内的错误码,比如500提示错误信息,501在500的基础上做一些特殊的业务操作。
- 确定传输文件方式,比如如果用blob,可以在里面封装一个“另存为”,自动下载。
serverOut
对应的外部,第三方的接口,这里就不多说啦~
D2 AJAX 封装策略相关推荐
- java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- JS弹窗确认Ajax封装方法
2019独角兽企业重金招聘Python工程师标准>>> 代码示例: var modification = {method: function () {//开始发送数据 $.post ...
- Ajax封装2.0版
在之前了解并学习了Ajax的基础知识后,有些朋友可能觉得零碎的Ajax学起来有些繁琐,用起来也不太方便.那么我们为什么不能用函数将它封装起来,在我们需要它的时候便直接使用呢?那今天就让我们学习下Aja ...
- jquery ajax封装通用方法
//发送ajax post请求 function ajaxPost(url, param, successfn, errorfn) {ajax("post", "json ...
- Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言 才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
- Javascript ajax封装 并重载
看来我要把博客给弄起来,发现整天敲代码,有时候跟人沟通都成问题了,要多写点东西,整理整理忙乱的思绪.最近有幸接触WEB前端页面,看到项目里大伙写的JS代码头疼不已,而本人很懒又有严重的代码洁癖,一点点 ...
- 封装原声ajax,原生AJAX封装的简单实现
回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...
- ajax封装:get封装方式、post封装方式
ajax调用参数解释: ajax({url:"http://localhost:3000/users",method:"POST",data:"use ...
最新文章
- 最近的一次敏捷项目Scrum经验总结
- 【学习笔记】多项式相关算法
- C++ 成员函数做友元
- python 爬虫程序示例,python实现简单爬虫功能的示例
- Centos7 amp;amp; Docker amp;amp; Jenkins amp;amp; ASP.NET Core
- 飞鸽传书计算乘积的聚合函数跑哪去了呢?
- 当当购书双十一钜惠,5折封顶!附图灵人工智能书单
- 学UI设计就业难吗?
- perf in linux,[Package Request] 仓库请添加 linux-perf-5.4
- greensock 框架
- 用于HTML5移动开发的10大移动APP开发框架
- sql 计算周环比wow_Oracle计算环比的方法
- ubuntu16.04 将火狐浏览器语言设置成中文
- 网址 URL 最后的斜杠 / 是作甚的?
- Reporting Services 配置工具
- 虚拟直播需要哪些设备?如何搭建虚拟直播团队?
- 《R语言入门与实践》学习笔记四
- 内网渗透----常见后门
- 分形维数学习个人笔记1
- 华软资源共享--免费下载380套大型企业管理源码