- axios官网文档:http://www.axios-js.com/
jQuery与axios对比 | jQuery | axios |
1.ajax技术底层原理 | XMLHTTPRequest | XMLHTTPRequest |
2.体积大小 |
|
|
3.是否支持ES6的Promise | 不支持(底层使用其他方案模拟实现) | 支持 |
4.兼容性 | 好 (兼容性是jQuery的强项) |
|
1.1-axios基本使用
/*
1.学习目标介绍 : axios学习
(1) 了解axios作用 : 发送ajax请求
(2) axios发送get请求
(3) axios发送post请求
2.学习路线
(1)axios特点 (与jQuery区别)
* axios优点
a.体积小,只有发送ajax功能 (jQuery体积大,有一堆的DOM操作方法在vue中用不上)
b.技术先进:基于Promise技术封装ajax
* axios缺点
a.浏览器兼容性不好(技术太先进了)
(2)axios基本使用
axios.get().then().catch().then();
axios.post().then().catch().then();
a. get()里面写url和参数
b. 第一个then() 表示成功回调 ,相当于jq里面的success
c. catch() 表示失败回调
d. 第二个then() 表示完成回调:无论成功失败都会执行
(3)axios发送get请求传参
(4)axios发送post请求传参
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1">基本使用</button>
<button id="btn2">点我发送get请求</button>
<button id="btn3">点我发送post请求</button>
<!-- 导入axios -->
<script src="./axios.js"></script>
<script>
/*
1.学习目标介绍 : axios学习
(1) 了解axios作用 : 发送ajax请求
(2) axios发送get请求
(3) axios发送post请求
2.学习路线
(1)axios特点 (与jQuery区别)
* axios优点
a.体积小,只有发送ajax功能 (jQuery体积大,有一堆的DOM操作方法在vue中用不上)
b.技术先进:基于Promise技术封装ajax
* axios缺点
a.浏览器兼容性不好(技术太先进了)
(2)axios基本使用
axios.get().then().catch().then();
axios.post().then().catch().then();
a. get()里面写url和参数
b. 第一个then() 表示成功回调 ,相当于jq里面的success
c. catch() 表示失败回调
d. 第二个then() 表示完成回调:无论成功失败都会执行
(3)axios发送get请求传参
(4)axios发送post请求传参
*/
//基本使用
btn1.onclick = function () {
/*
get() : 写url和请求参数
then(res=>{}) : 成功回调, 相当于以前jq的success
catch(err=>{}):失败回调, 一般可以省略不写
then(()=>{}):完成回调, 表示请求完成,无论成功失败都会执行。一般可以省略不写
*/
axios.get('https://autumnfish.cn/api/joke').then(res => {
//请求成功
console.log(res);
}).catch(err => {
//请求失败
console.log(err);
}).then(() => {
//请求完成
console.log('本次请求完成');
});
};
//get请求
btn2.onclick = function () {
//get方法第一个参数是url
//get方法第二个参数是对象类型 { params:{get参数对象} }
axios.get('https://autumnfish.cn/api/joke/list', {
params: {
num: 10
}
}).then(res => {
//请求成功
console.log(res);
});
};
//post请求
btn3.onclick = function () {
//post方法第一个参数是url
//post方法第二个参数是对象类型 { post参数对象 }
axios.post('http://ttapi.research.itcast.cn/mp/v1_0/authorizations', {
mobile: '18801185985',
code: '246810'
}).then(res => {
//请求成功
console.log(res);
});
};
</script>
</body>
</html>