一、简介
1、介绍
- axios前端异步请求库类似jouery ajax技术,
- axios用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新页面局部;
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
2、特性:
- 从浏览器中创建XLHttpRequests从node.js 创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据取消请求
- 自动转换JSON数据,客户端支持防御XSRF
二、引用步骤
1、安装
bash
cnpm i axios --save
2、全局引用
javascript
//在main.js里面引用
...
import axios from 'axios'
...
Vue.prototype.axios = axios;
new Vue({
axios,
router,
store,
render:h=>h(App)
}).$mount('#app'
三、基本使用
1、异步请求之GET方式(查询)
javascript
axios.get("http://localhost:8081/demo?id=21&name=xiaowang ").then( function(res){
//代表请求成功之后处理
console.log(res);
console.1og (res.data);
}).catch( function (err){
//代表请求失败之后处理
alert ('进入catch ')
console.log (err);
});
2、发送异步请求之POST方式(添加)
javascript
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3、其他方式的请求
javascript
axios.put(.then( ).catch ( ); //修改
axios.patch( ).then( ).catch( );
axios.delete( "ur1?id=21").then ( ).catch ( ); //删除
4、axios创建默认实例发送请求
javascript
//创建axios的配置对象
var instance = axios. create({
baseURL: 'http://localhost:8081/',
timeout: 5000,
});
instance.get("/demo?id=21&name=xiaowang ").then( function(res) {
//代表请求成功之后处理
console.log(res);
console.1og (res.data);
}).catch( function (err) {
//代表请求失败之后处理
alert ('进入catch ');
console.log (err);
});
5、axios拦截器(interceptor)
分类:
- 请求拦截器:在请求发送前进行必要操作处理,例如添加统一的cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
- 响应拦截器:对响应结果(响应体)进行处理,通常是数据统一处理等,也常来判断登录失效等。
作用:
- 用来将axios中共有参数,响应公共处理等公共部分,交给拦截器处理,减少axios发送请求时代码冗余。
拦截器一般做什么?
- 修改请求头的一些配置项
- 给请求的过程添加一些请求的图标
- 给请求添加参数
- 对响应结果进行处理