axios教程01-基本使用流程
Posted 坤小
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axios教程01-基本使用流程相关的知识，希望对你有一定的参考价值。
- axios官网文档：http://www.axios-js.com/
| jQuery与axios对比 | jQuery | axios |
|---|---|---|
| 1.ajax技术底层原理 | XMLHTTPRequest | XMLHTTPRequest |
| 2.体积大小 | 大（包含大量dom操作与ajax） | 小(只有ajax请求) |
| 3.是否支持ES6的Promise | 不支持（底层使用其他方案模拟实现） | 支持基于原生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>
以上是关于axios教程01-基本使用流程的主要内容，如果未能解决你的问题，请参考以下文章