关注“前端学苑” ,坚持每天进步一点点
「~axios封装~」
前端技术真是一个发展飞快的领域,jquery的时代,那时用的是 ajax 来处理数据请求。现在vue时代已经到来,axios 和 fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别,并给出自己的一些理解。
一、ajax, Axios, Fetch区别:
1、JQuery ajax ( 廉颇老矣,尚能饭,但是总有饭不动的一天 )
对原生XHR的封装,除此以外还增添了对JSONP的支持。JQuery ajax经过多年的更新维护,真的已经是非常的方便了。
$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});
缺点:
1)本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
2)基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案。
3)JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
最主要的是随着VUE,REACT新一代框架的兴起,以及ES规范的完善,更多API的更新,JQuery这种大而全的JS库,未来的路会越走越窄。
2、Axios ( 谁敢横刀立马,唯Axios将军 )
Vue2.0之后,Axios替换JQuery ajax。Axios 是一个基于 promise 的 HTTP 库,用于浏览器和node.js等http客户端。符合最新的ES规范。
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});
Axios特性
1)支持 promise API
2)拦截请求和响应
3)转换请求数据和响应数据
4)取消请示
5)自动转换JSON数据
6)客户端支持防御 XSRF
3、Fetch ( 酋长的孩子,还需成长 )
Fetch号称是AJAX的替代品,好处如下:
1) 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里。
2) 更好更方便的写法,诸如:
try { let response = await fetch(url); let data = response.json(); console.log(data);} catch(e) { console.log("Oops, error", e);}
Fetch的优势主要优势就是:
1)更加底层,提供的API丰富(request, response)
2)脱离了XHR,是ES规范里新的实现方式
Fetch 常见坑
1)Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: 'include'})
2)服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
二、Vue中axios的使用
axios为什么要二次封装
1、代码封装,重用性高,减少代码量,减低维护难度。
2、统一处理一些常规的问题一劳永逸,如http错误。
3、拦截请求和响应,提前对数据进行处理,如获取token,修改配置项。
具体配置如下:1、请求配置默认值
axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 创建实例时设置配置的默认值var instance = axios.create({ baseURL: 'https://api.example.com'});// 在实例已创建后修改默认值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
2、axios常用请求方法
axios请求方法:get,post,put,patch,delete
get: 获取数据
post: 提交数据 (表单提交+文件上传)
put: 更新数据 (所有数据推送到后端)
patch: 更新数据 (只将修改的数据推送到后端)
delete: 删除数据
1)get方法传递参数时需注意
axios.get('/data/json',{ params: { id: 12 }}).then(res => { console.log(res); })
说明:
status code: 304 not modified //请求到的数据与上次相同就会返回304 数据重定向。
2)post方法
常用的data格式:
(1)form-data 用于表单提交,图标与文件上传
Content-Type:multipart/from-data //表示post方式以 formdata 形式发送
(2)applicition/json
Content-Type:applicition/json //表示post方式以 json 格式发送
3)delete方法
(1)接口需要在url上拼接参数
axios.delete('/delete',{ params:{id: 12} //query string parameters}).then()
(2)不是在url上进行传输的
axios.delete('/delete',{ data:{id: 12} //request payload}).then()
并发请求:同时进行多个请求,并统一处理返回值。两个步骤:
(1)axios.all([]).then()
(2)axios.spread()
axios.all([ axios.get('url1'), axios.get('url2')]).then( axios.spread((res1, res2) => { console.log(res1, res2); }))
3、拦截器
// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config;}, function (error) { // 对请求错误做些什么 return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response;}, function (error) { // 对响应错误做点什么 return Promise.reject(error);});
2)取消拦截器
let interceptors = axios.interceptors.request.use( config => { // 在发送请求前做些什么 return config }, error => { // 请求错误的时候做什么 return Promise.reject(error) });// 取消拦截器axios.interceptors.request.eject(interceptors);
3)响应的错误处理封装
axios.interceptors.response.use(response => { return response;}, error => { if (error && error.response.status) { switch(error.response.status) { case 400: error.message = '请求错误'; break; case 401: error.message = '未授权,请重新登录'; break; case 403: error.message = '拒绝访问'; break; case 500: error.message = '服务端出错'; default: error.message = `连接错误${error.message.status}`; } } else { error.message = '连接服务器失败'; } return Promise.resolve(error);});
1 、对axios的二次封装可以统一前后端交互的请求/响应数据类型,统一处理http错误码和自定义的code,避免在组件中频繁的判断,以及code码的使用混乱。
2、对api的集中管理和按需引用有助于项目管理和重构,代码的复用,实际项目开发时可以按模块对api进行划分,结构清晰。
推荐热门技术文章:
1、一篇文章,教你学会Git2、初探 Electron 桌面应用 - 理论篇
3、解锁 Webpack,看这篇就够了
4、干货:前端开发常见规范
5、这一次,彻底弄懂 Promise
6、关于移动端适配,你必须要知道的
7、你还是只会 npm install 吗?
8、让程序员变懒的 “vue-admin-template” 后台管理系统
9、这样配置,让你的VS Code好用到飞起!
10、前端性能优化实战
觉得本文对你有帮助?请分享给更多人
关注「前端学苑」加星标,提升前端技能