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年内前端人走向前列。

识别方二维码加我微信、长期交流学习

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

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

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

相关文章

护肤产生共鸣_通过以人为本的设计编织共鸣的20个指针

护肤产生共鸣Deep into a project right now, I can’t help but reflect on how I practice empathy in design. Human centered design means empathising with and designing for people, keeping our focus on people throughout. It is not just one stage, it is a minds…

谷歌已推送 Android Q Beta 1

开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> 今日凌晨,谷歌正式推送了 Android Q 的首个 Beta 版本,Pixel 全系列手机可以尝鲜体验这款最新的系统。 据官方博客介绍,Android Q 为用户带来了…

对使用CodeSmith模板生成NHibernate的代码的分析

CodeSmith是我们常用的代码生成工具,其跟据不同的模板生成不同代码的方式能大大加快我们的项目开发,减少重复劳动。NHibernate模板就是其常用模板之一。从这里可以下载到最新的模板文件。现在最新的版本为NHibernate-v1.2.1.2125,可以生成NHi…

若川诚邀你加源码共读群,每周一起学源码

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找。回复pdf,可以获取前端优质书籍。最近我创建了一个源码共读的前端交流群,希望尝试帮…

matlab 规范,matlab-代码-规范

matlab-代码-规范 1. 标识符命名原则 标识符的名字应当直观,其长度应当符合“最小长度,最大信息量”原则。 1) 非矩阵变量: 变量名应该以小写字母开头的大小写混合形式 譬如:shadowFadingTable,servingSector&#xf…

zoom视频会议官网_人性化视频会议的空间(Zoom等)

zoom视频会议官网第二部分:房间的创造力 (Part Two: The Creativity of Rooms) In Part One I shared thoughts on how virtual spaces can often leave little room to embody our most human selves. The lack of a public sphere that parallels our shared publ…

KOFLive Postmortem

为期两个月的团队项目完成了,我们的游戏也已经发布。在这个名叫KOFLive的小游戏里,我们集成了五个真人角色,每个角色有拳脚基本招数以及三个小招、一个大招,硬值、防御、集气、双人对战、人机对战、练习模式等格斗游戏的Feature基…

单调队列优化多重背包

就是按照 % 体积的余数来分组&#xff0c;每组单调队列优化。 直接上模板好了。 1 #include <bits/stdc.h>2 3 typedef long long LL;4 const int N 100010;5 6 int n, V, cnt[N], cost[N];7 LL f[2][N], val[N], p[N], top, head;8 9 inline void Max(LL &a, const…

2021年7月 虾皮、货拉拉、有赞等面经总结

大家好&#xff0c;我是若川&#xff0c;加我微信 ruochuan12 进源码交流群。今天分享一篇7月份新鲜出炉的面经&#xff0c;文章较长&#xff0c;可以收藏再看。学习源码系列、面试、年度总结、JS基础系列。本文来自作者几米阳光 投稿 原文链接&#xff1a;https://juejin.cn/p…

谷歌抽屉_Google(最终)会杀死导航抽屉吗?

谷歌抽屉A couple of months ago Google has celebrated with enthusiasm 15 years of Google Maps, one of the most used and appreciated services worldwide from the company.几个月前&#xff0c;Google热情地庆祝Google Maps诞生15周年&#xff0c;这是该公司在全球范围…

MySQL——安装

MySQL——安装 1. 下载源&#xff1a; http://repo.mysql.com/yum/mysql-8.0-community/el/7/x86_64/mysql80-community-release-el7-2.noarch.rpm 该源目前为8.0版本&#xff0c;如果需要最新请退至根目录找。 1wget http://repo.mysql.com/yum/mysql-8.0-community/el/7/x86_…

axure9控件树 rp_如何在Axure RP 9中创建分段控件

axure9控件树 rpSegmented controls are not very easy to tackle in prototyping. This is especially true when you have more than 2 segments. This article will show you how to create a segmented control with 3 segments in Axure in just 2 simple steps. The tech…

【送书-小姐姐配音】低代码平台的核心价值与优势

大家好&#xff0c;我是若川。记得点上方听小姐姐配音&#xff0c;识别下方二维码加我微信 ruochuan12&#xff0c;明天&#xff08;8月8日&#xff09;晚8点在朋友圈发动态。点赞抽3位小伙伴包邮送《实战低代码》&#xff0c;细则见动态。最近组织了源码共读活动&#xff0c;每…

sketch钢笔工具_设计工具(Sketch,Adobe XD,Figma和InVision Studio)中奇怪的一项功能

sketch钢笔工具When you build a new product that is very similar to the existing products in the market, the designers and product managers tend to do certain features different from others. Sometimes this brings a good change, sometimes worse.当您构建与市场…

Python进阶:如何将字符串常量转化为变量?

2019独角兽企业重金招聘Python工程师标准>>> 前几天&#xff0c;我们Python猫交流学习群 里的 M 同学提了个问题。这个问题挺有意思&#xff0c;经初次讨论&#xff0c;我们认为它无解。 然而&#xff0c;我认为它很有价值&#xff0c;应该继续思考怎么解决&#xf…

尤雨溪开发的 vue-devtools 如何安装,为何打开文件的功能鲜有人知?

1. 前言大家好&#xff0c;我是若川。最近组织了一次源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获&#xff0c;感兴趣可以加我微信 ruochuan12&#xff0c;拉你进群学习。第一周读的是&#xff1a;据说 99% 的人不知道 vue-devtools 还能直…

sketch浮动布局_使用智能布局和调整大小在Sketch中创建更好的可重用符号

sketch浮动布局Sketch is a widely used tool for UI designs. It implemented the Sketch是用于UI设计的广泛使用的工具。 它实施了 atomic design methodology and made the workflow of UI design much more efficient. You can create a Symbol in Sketch and use it ever…

小姐姐笔记:我是如何学习简单源码拓展视野的

大家好&#xff0c;我是若川。这是我上周组织的源码共读纪年小姐姐的笔记&#xff0c;写得很好。所以分享给大家。欢迎加我微信 ruochuan12&#xff0c;进源码共读群。其他更多人的笔记可以阅读原文查看。川哥的源码解读文章&#xff1a;据说 99% 的人不知道 vue-devtools 还能…

保持危机感和紧迫感_什么是紧迫的:您需要知道的一切

保持危机感和紧迫感Putting the finishing touches on a graphic design project calls for a keen eye. But you already know this, because perfectionism is just a part of the job! You look at every nook and cranny of a project before you can consider it complete…

如何系统搭建现代 Web CI/CD

大家好&#xff0c;我是若川。今天分享一篇00后写的CI/CD直播文字稿。之前发过他的故事&#xff1a;一位00后前端2年经验的成长历程。我最近组织了源码共读活动&#xff0c;感兴趣的加我微信 ruochuan12。本次直播录播链接&#xff1a;https://live.juejin.cn/4354/595741[1]开…