建网站语言,制作app下载,网站地图模版,网站首页怎么做大家好#xff0c;我是若川。今天分享一篇axios封装的文章。学习源码系列、面试、年度总结、JS基础系列。作为前端开发者#xff0c;每个项目基本都需要和后台交互#xff0c;目前比较流行的ajax库就是axios了#xff0c;当然也有同学选择request插件#xff0c;这个萝卜白… 大家好我是若川。今天分享一篇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抽取到这里集中管理。封装interceptorinterceptor作用就是拦截可以针对请求参数和响应结果进行拦截处理一般在项目当中我们主要会针对接口常规报错、网络报错、系统超时、权限认证等做拦截处理。此处我们对通过create创建实例设置baseUrltimeout然后在设置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;charsetUTF-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)loadingInstanceLoading.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)urlhttp://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年内前端人走向前列。识别上方二维码加我微信、长期交流学习今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
