axios怎么封装,才能提升效率?
大家好,我是若川。今天分享一篇axios封装的文章。学习源码系列、面试、年度总结、JS基础系列。
作为前端开发者,每个项目基本都需要和后台交互,目前比较流行的ajax库就是axios了,当然也有同学选择request插件,这个萝卜白菜,各有所爱了。目前虽然axios有config、interceptor和各个请求方式,但是针对一个大型的项目,我们还是需要做二次封装才能快速提升开发效率!
今天我们针对axios库做二次封装,看看是否有简化我们的开发工作。
创建项目
vue create axios-demo
创建目录
// 进入到项目空间中cd axios-demo// 在src下创建api目录
创建三个文件(index.js/interceptor.js/request.js)
/*** index.js* api地址管理*/
export default {login:'/user/login',getInfo:'/user/getInfo'
}
index.js实际上和axios封装没有关系,因为它也属于API这一层,所以我一起创建了,我个人习惯把项目所有url抽取到这里集中管理。
封装interceptor
interceptor作用就是拦截,可以针对请求参数和响应结果进行拦截处理,一般在项目当中,我们主要会针对接口常规报错、网络报错、系统超时、权限认证等做拦截处理。
此处我们对通过create创建实例,设置baseUrl,timeout,然后在设置request和response的拦截。
/*** 生成基础axios对象,并对请求和响应做处理* 前后端约定接口返回解构规范* {* code:0,* data:"成功",* message:""* }*/
import axios from 'axios'
import { Message } from 'element-ui'// 创建一个独立的axios实例
const service = axios.create({ // 设置baseUr地址,如果通过proxy跨域可直接填写base地址baseURL: '/api',// 定义统一的请求头部headers: {post: {"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}},// 配置请求超时时间timeout: 10000, // 如果用的JSONP,可以配置此参数带上cookie凭证,如果是代理和CORS不用设置withCredentials: true
});
// 请求拦截
service.interceptors.request.use(config => {// 自定义header,可添加项目tokenconfig.headers.token = 'token';return config;
});
// 返回拦截
service.interceptors.response.use((response)=>{// 获取接口返回结果const res = response.data;// code为0,直接把结果返回回去,这样前端代码就不用在获取一次data.if(res.code === 0){return res;}else if(res.code === 10000){// 10000假设是未登录状态码Message.warning(res.message);// 也可使用router进行跳转window.location.href = '/#/login';return res;}else{// 错误显示可在service中控制,因为某些场景我们不想要展示错误// Message.error(res.message);return res;}
},()=>{Message.error('网络请求异常,请稍后重试!');
});
export default service;
如果是CORS/JSONP需要区分环境,可通过process.env.NODE_ENV
来选择使用哪个地址。如果使用的是代理,则Vue项目需要在vue.config.js中的proxy里面增加环境判断。
process.env.NODE_ENV=== "production" ? "http://www.prod.com/api" : "http://localhost/:3000/api"
以上是针对interceptor做的二次封装,上面我们没有把常规错误放进去,是因为我们想要在后期控制错误是否显示,所以我们会在request中处理。
封装axios
创建request文件,针对axios做适合业务发展的封装,很多时候架构师做公共机制都是为了迎合自身项目需要,而并非一味求大做全,所以这个大家要适当调整,比如我们只用get/post请求。
/*** request.js* 通过promise对axios做二次封装,针对用户端参数,做灵活配置*/
import { Message,Loading } from 'element-ui';
import instance from './interceptor'/*** 核心函数,可通过它处理一切请求数据,并做横向扩展* @param {url} 请求地址* @param {params} 请求参数* @param {options} 请求配置,针对当前本次请求;* @param loading 是否显示loading* @param mock 本次是否请求mock而非线上* @param error 本次是否显示错误*/
function request(url,params,options={loading:true,mock:false,error:true},method){let loadingInstance;// 请求前loadingif(options.loading)loadingInstance=Loading.service();return new Promise((resolve,reject)=>{let data = {}// get请求使用params字段if(method =='get')data = {params}// post请求使用data字段if(method =='post')data = {data:params}// 通过mock平台可对局部接口进行mock设置if(options.mock)url='http://www.mock.com/mock/xxxx/api';instance({url,method,...data}).then((res)=>{// 此处作用很大,可以扩展很多功能。// 比如对接多个后台,数据结构不一致,可做接口适配器// 也可对返回日期/金额/数字等统一做集中处理if(res.status === 0){resolve(res.data);}else{// 通过配置可关闭错误提示if(options.error)Message.error(res.message);reject(res);}}).catch((error)=>{Message.error(error.message)}).finally(()=>{loadingInstance.close();})})
}
// 封装GET请求
function get(url,params,options){return request(url,params,options,'get')
}
// 封装POST请求
function post(url,params,options){return request(url,params,options,'post')
}
export default {get,post
}
request.js主要针对axios做二次封装,目的同样是为了拦截所有前端请求,这样可以做前端loading效果、mock、错误拦截、错误弹框显示、数据适配、参数适配、环境适配等工作。
接下来,我们看下如何使用
”
打开main.js
// 导入插件
import request from './api/request'
// 在原型上扩展,这样不用在每个页面都导入request
Vue.prototype.request = request;
请求调用
this.request.get('/login',{userName:'admin',userPwd:'admin'}).then((res={})=>{// 此处只接收成功数据,失败数据不返回}).catch(()=>{// catch 可以不要,如果想要捕获异常,就加上去})
如果不做二次封装,我们很难实现以上功能点,这是在公司做了很多个中型后台系统后,总结出来的一些个人经验,我相信您看了之后,会有一些启发和帮助,如果有疑问或者不够完善可以留言或联系我,我进行修订。
最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。
推荐阅读
我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历
在字节做前端一年后,有啥收获~
老姚浅谈:怎么学JavaScript?
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。
识别上方二维码加我微信、长期交流学习
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~
axios怎么封装,才能提升效率?相关推荐
- router中获取vuex_Vue 中 Axios 的封装和 API 接口的管理
(给JavaScript加星标,提升前端技能) 作者:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U ...
- 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场
提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...
- axios get 某个参数是数组怎么传_Vue 中 Axios 的封装和 API 接口的管理
我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios ...
- vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
- 拦截器读post参数导致接口post请求报错_vue中Axios的封装和API接口的管理
一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响 ...
- $.post请求的参数在后台代码中得到为null_vue中Axios的封装和API接口的管理
来源:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axio ...
- Axure RP使用技巧分享 快速提升效率
Axure专为快速原型设计而生的应用,Axure破解版可以辅助产品经理快速设计完整的产品原型,并结合批注,说明以及流程图,框架图等元素.如何使用Axure设计工具提升效率,包括以下几方面 1.通用元件 ...
- 客观分析电子合同是如何提升效率的?
"王总您放心,我已经催过快递员,合同今天肯定能派送到您手上--" 随着互联网技术在商务合作中不断普及,信息高度透明.行业竞争激烈.好不容易签下的客户在"走合同" ...
- 云队友丨如何提升效率,所有方法都在这里
第三季·大复盘 新年好! 专栏第三季度「效率升级」的课程已经全部讲完了,趁着还没开工,我来带你回顾一遍全季的内容,帮你把这些知识点,串联成一整个面,形成一套完整的知识结构,以便于你能够更好地吸收,转化 ...
最新文章
- Crash常见异常总结
- php 点击按钮更新mysql_PHP与mysql超链接 有更新按钮 跳转更新,删除后数据表中的数据 怎么做来着?...
- modelandview跳转页面404_Thinkphp制作404跳转页
- 文件服务器的配置与管理(2) 实现软RAID
- spring aop记录日志方案设计
- Nginx 访问日志轮询切割
- SAP Kyma(Extension Factory on SAP Cloud Platform)的架构简介
- 关于非阻塞的recv的时候返回的处理
- 20个响应式网页设计中的“神话”误区
- java final static
- 事务学习总结(2)——spring事务
- 粒子群优化算法(2)离散粒子群算法
- 广州客村计算机培训,愿达客村校区西班牙语培训班
- 离散中多重组合是指_大学离散数学复习试题
- 【sdx62】uci软件包文件中新增脚本文件functions.sh但未打包到文件系统解决方案
- Android实现侧滑recycleView+CardVeiw卡片阴影效果
- The project seems to require yarn but it‘s not installed.
- 重新编译Spark2.4.0 Parcels包
- GMap.NET入门详细教程【2】-------- 初始化并加载一张地图
- java版QQ 欢迎点评
热门文章
- 蔻驰和mk哪个更大牌_mk和coach哪个好?mk和coach包包是一个档次吗?
- FileSystemObject (FSO)对象方法总结及应用
- C#JsonConvert.DeserializeObject反序列化json字符
- SharePoint Server和Office 365之间的混合模式集成概述
- EMVTag系列3《持卡人基本信息数据》
- 使用JXL组件操作Excel和导出文件
- 黑马-程序员C#泛型简介
- 推荐一个ASP.NET的资源网站
- 华为3Com Quidway 2116-SI
- idea 项目jar反编译java_带你上手阿里开源的 Java 诊断利器:Arthas