axios 超时_网络请求 axios 插件

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

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

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

中文文档 ：

http://www.axios-js.com/