axios使用方法学习笔记

定义

axios官网

axios是由Promise封装的一个HTTP库，它的主要特点是
1：从浏览器中创建XMLHttpRequests
2：支持Promise API
3：拦截请求和响应
4：转换请求数据和响应数据
5：自动转换JSON数据
6：客户端支持防御XSRF

参考：axios，Ajax,jQuery ajax,axios和fetch的区别

和AJAX的区别是设计模式不同，AJAX的设计模式是MVC，而axios的设计模式是MVVM

具体使用

1： axios默认使用的请求方式是GET请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'接口文档请求地址'
}).then(res=>{
console.log(res)
})
</script>

2： 使用GET请求方式

不带参数

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'接口文档请求地址',
method:'GET'
}).then(res=>{
console.log(res)
}).catch(err=>{console.log(err)})//catch通常是捕获客户端请求格式不正确所导致的错误
</script>

简便写法

axios.get('接口文档地址').then(res=>{console.log(res)}).catch(err=>{console.log(err)})

带参数，使用params传参

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'接口文档请求地址'，
params:{
id:1，
name:'张三'
}
}).then(res=>{
console.log(res)
}).catch(err=>{console.log(err)})
</script>

简便写法

axios.get('接口文档地址'，{params:{id:1,name:'张三'}}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})

3：使用POST请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'接口文档请求地址'，
method:'post'
}).then(res=>{
console.log(res)
}).catch(err=>{console.log(err)})
</script>

也可以

axios.post('接口文档地址').then(res=>{console.log(res)}).catch(err=>{console.log(err)})

• 带参数请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'接口文档请求地址'，
method:'post',
params:{
id:2，
name:'张三'
}
}).then(res=>{
console.log(res)
})
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:'接口文档请求地址'，
data:{
id:2，
name:'张三'
}
}).then(res=>{
console.log(res)
})
</script>

简便写法

axios.post('接口文档地址'，"id=2&name=张三").then(res=>{console.log(res)})..catch(err=>{console.log(err)})

4：并发请求

axios.all([
axios.get('接口文档地址')，
axios.get('接口文档地址'，{params:{id:1}})
]).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})

将两个请求的数据分隔开

axios.all([
axios.get('接口文档地址')，
axios.get('接口文档地址'，{params:{id:1}})
]).then(res=>{
axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
})
}).catch(err=>{
console.log(err)
})

5：全局配置

<script>
//全局配置

axios.defaults.baseURL='接口文档基地址'；
axios.defaults.timeout=5000;//超出5秒就终止请求
//实际调用

axios.get('接口地址').then(res=>{console.log(res)}).catch(err=>{console.log(err)})

<script>

6：axios实例

<script>
let newVar=axios.create({
baseURL:'接口文档基地址'，
timeout:5000

});//实例创建
newVar({
url:'接口地址'
}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})

</script>

axios实例可以同时创建多个

7：axios请求拦截器

axios拦截器分为请求拦截器和响应拦截器，根据js自上而下执行的规则，使用请求拦截器我们可以在发起请求时添加动画特效，强制登陆等操作

• 请求拦截器

<script>
axios.interceptors.request.use(config=>{
console.log('进入请求拦截器')；
console.log(config);
return config;
},err=>{
console.log(''请求失败)
console.log(err)
})

axios.get('接口文档地址').then(res=>{console.log(res);})
</script>

• 响应拦截器

<script>
axios.interceptors.response.use(config=>{
console.log('进入响应拦截器')；
console.log(config);
return config;//放行
},err=>{
console.log(''请求失败)
console.log(err)
})

axios.get('接口文档地址').then(res=>{console.log(res);})
</script>

axios在vue中的封装

//在文件request.js中封装

export function request(config){
let newVar=axios.create({
baseURL:'接口文档基地址'，
timeout:5000
});
return newVar(config)	;

}
//调用方法
import {request} from 'request.js的绝对地址'
request({url:'接口地址'}).then(res=>{console.log(res)})

参考：axios从入门到入土