- 学习axios需要掌握AJAX(传输数据)和Promise(异步)
- 使用axios需要创建一个本地服务器,一般项目的脚手架都会自行创建(Vue8080、react3000)
- axios实例中的params配置项(对象)和 Vue路由传参中的params参数(对象)是相通的
- axios会自动将服务器返回的结果进行JSON解析
axios简介:
axios是一个基于Promise的网络请求库,作用于浏览器和node.js中 ,经常用在Vue和React框架中发送AJAX请求。
- 支持 Promise,使用Promise管理异步,告别传统callback方式
- 拦截请求与响应,比如:在请求前添加授权和响应前做一些事情。
- 转换请求数据和响应数据,比如:进行请求加密或者响应数据加密。
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
可以使用 npm i axios -D 安装开发依赖,也可以使用CDN
axios实例
创建
使用 axios.create() 来创建axios实例,配置相关信息,进行网络请求。当后端接口地址有多个,并且超时时长不同时,我们可以创建多个实例,配置不同的超时时长,用不同的实例对象去请求不同的接口。
此时我们可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口,并且使用不同的配置。
请求配置
我们有三种配置方式,优先级:全局配置 < 实例配置 < 请求配置
- axios全局配置
- axios实例配置
- axios请求配置
拦截器
拦截器(interceptors):在 请求前 或 响应被处理前 进行拦截
- 请求拦截器,使用 xxx.interceptors.request.use()
- 响应拦截器,使用 xxx.interceptors.response.use()
取消拦截器使用 xxx.interceptors.response.eject() 方法
举例一:登录权限
举例二:移动端开发数据加载loading动画
实现的效果是请求数据的时候显示loading动画,数据响应后隐藏loading动画。