文章目录
axios简述
老样子,先了解背景,再学习使用
虽然看不懂,但还是了解一下的Axios git仓库
Axios是干啥使的
- Axios是一个基于Promise的Http库,可以用在浏览器和node.js中
- Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架,它的主要作用就是实现AJAX异步通信
- 为啥要用它,因为Vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,此时就需要使用一个额外的通信框架与服务器交互,当然也可以使用jQuery提供的AJAX通信功能
- 简单来说,Axios就是可以发送get、post请求
Axios功能特点
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API【JS中链式编程】
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
传统AJAX & jQuery & Vue-Resource
其实在Vue开发过程中能实现发送网络请求的方式有很多种,为什么最终选择了Axios呢,当然是由于它过于优秀,同时也因为队友并不怎么给力啊
- 传统Ajax请求是基于XMLHttpRequest
而在项目开发中,封装它的过程是比较麻烦的,并且配置和调用的方式也比较混乱,一般开发者都不会用这种方式,而是使用jQuery-Ajax - jQuery-Ajax相对于传统的Ajax是好用的
但是存在的问题是,Vue的开发过程中不需要使用jQuery,而且jQuery是一个不那么小的,比较重量级的框架,而为了方便进行一个网络请求,特意引入一个jQuery是非常没有必要的,也是不划算的 - Vue-Resource
尤同学曾经推出了Vue-resource插件,Vue-Resource的体积相对于jQuery小了很多,但当Vue2.0版本推出后,尤同学说以后将不会再对Vue-Resource进行维护和更新了,所以说继续使用这种方式进行开发项目是存在很大隐患的。 - Axios
Axios也是尤同学说不再维护Vue-Resource后推荐使用的框架,它支持再浏览器中发送XMLHttpRequests请求,支持在Node.js中发送http请求,支持Promise API,可以拦截请求和响应,反正呢,就是目前最厉害的了。
Axios基础使用(基于json-server)
准备工作
- 一如既往,使用命令行创建项目工程
- 开发工具WebStrom打开,修改项目目录结构
安装
- 本地安装axios
- 安装vue-axios
因为在Vue中使用,所以光安装axios是不够用的,还需要再额外安装一个vue-axios
开始使用
本次使用也是使用json-server来模拟数据的,所以使用json-server部分与vue-resource中的一致
怕你懒得翻,所以还是再说一遍
上次在Vue-Resource中使用的是全局安装,所以本次就不需要再安装一次了
好了,启动完json-server我们就开始用了。
直接使用(局部使用)
App.vue中的script部分直接使用
与Vue-Resource的使用方式类似,但是我们可以看到的是数据存储在data里,而Vue-Resource数据存储在body里
App.vue的template部分
全局引用
- main.js中引入Axios和vue-axios
- main.js中创建Axios实例并安装使用
!!!注意Vue.use安装的是VueAxios而不是Axios,因为写错这个问题坑了我好久 - App.vue里script使用有两种方式,推荐第二种
方式1:
方式2:
实践
做个弹窗,完成新增用户功能
- App.vue的template在上述的基础上新增
- App.vue上script部分对按钮点击后的操作
Axios的拦截器使用
Axios比较显著的优点就是它的拦截器很好用,可以在方法之前和方法之后进行拦截
- main.js中添加代码进行使用
前置拦截
后置拦截
运行后结果如下:
项目结构改进
当前我们可以看到给main.js里添加了不少代码,因为拦截器的缘故
所以可以效防在vue路由里对项目结构的改进,将关于拦截器的部分,单独写入一个文件,然后在main.js里引入
- axios/index.js的内容
- main.js里引入
可以看到main.js里的代码简洁了不少