对于新(自己不知道或者不会使用的技术的统称)技术而言,总是要经历几个过程:学习->使用->在使用中学习->再使用->熟练使用,完全掌握,举一反三。
我一直想把我学到或者说使用着的好的技术知识做一个简单的总结,也算是一个简单的复盘的过程,同时也逼迫自己不断去学习新的技能,应用在实际的开发工作中,并持续性输出学习文档等,最终形成自己的知识链。今天是这个宏伟目标的第一步。
在Vue1.x中,官方推荐使用的ajax库是vue-resource。到了Vue2.x,官方(尤大)推荐的ajax库改为了axios,官方的解释是:已有一个更完备的轮子,就不需要造一个新的。
axios 本身优点也决定了它必定会被重用。被称为几乎完美的网络请求插件。
一、axios 的特点
1.1 既可以支持浏览器端的网络请求,也支持node网络请求,也就是说axios即可以使用在前端页面中使用 axios发送hettp请求,也可以在node端用axios发送http请求。
1.2 支持Promise API,提供异步请求,有效解决回调陷阱。
1.3 支持请求和响应拦截,开发中主要拦截响应,请求拦截没有意义。
1.4 转换请求和响应格式
1.5 浏览器端支持防止CSRF(跨站请求伪造)。
二、基本使用
2.0 注意:Vue开发中使用的插件,特别如网络请求这个每个组件中都可能会使用到的插件,一定要有统一的封装,不要直接在组件中使用。统一的封装好处如下:
2.0.1 全局只有一个公共插件入口,一旦插件不允许在项目中使用,只需要更新统一的入口文件即可,不需要到组件中一个一个找,便于后期维护。
2.0.2 可以设置统一的响应拦截,统一项目中的错误码,集中处理接口错误码,反馈错误。
2.1 按装axios
npm i axios --save
2.2 新建文件夹,命名为network,文件夹新建request.js文件,统一公共插件入口。
2.3 在request.js 中引入 axios
2.4 定义request 模块,并提供导出功能,并分别列出了公共超时时间,简单的封装。
三、组件中使用:配置完毕后,在组件中使用,直接引入request
3.1 get请求
注意:参数名称为params
3.2 post请求
四、拦截器使用:
4.1 请求拦截
请求拦截一般对请求头携带信息进行处理,比如用户登录 token携带等。
响应拦截主要是是处理错误码:
4.2 响应拦截
总结:
axios 插件对网络请求封装非常优秀,使用简单,能够彻底解决回调陷阱等一系列请求过程存在的问题,值得细细品味。