对于新(自己不知道或者不会使用的技术的统称)技术而言,总是要经历几个过程:学习->使用->在使用中学习->再使用->熟练使用,完全掌握,举一反三。

我一直想把我学到或者说使用着的好的技术知识做一个简单的总结,也算是一个简单的复盘的过程,同时也逼迫自己不断去学习新的技能,应用在实际的开发工作中,并持续性输出学习文档等,最终形成自己的知识链。今天是这个宏伟目标的第一步。

在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文件,统一公共插件入口。

axios设置过期时间 axios 超时时间_axios 超时

2.3 在request.js 中引入 axios

axios设置过期时间 axios 超时时间_axios请求_02

2.4 定义request 模块,并提供导出功能,并分别列出了公共超时时间,简单的封装。

axios设置过期时间 axios 超时时间_axios设置过期时间_03

三、组件中使用:配置完毕后,在组件中使用,直接引入request

axios设置过期时间 axios 超时时间_axios设置过期时间_04

3.1 get请求

axios设置过期时间 axios 超时时间_axios请求_05

注意:参数名称为params

3.2 post请求

axios设置过期时间 axios 超时时间_axios完美封装_06

四、拦截器使用:

4.1 请求拦截

axios设置过期时间 axios 超时时间_axios请求封装_07

请求拦截一般对请求头携带信息进行处理,比如用户登录 token携带等。

响应拦截主要是是处理错误码:

4.2 响应拦截

axios设置过期时间 axios 超时时间_axios设置过期时间_08

总结:

axios 插件对网络请求封装非常优秀,使用简单,能够彻底解决回调陷阱等一系列请求过程存在的问题,值得细细品味。