axios02-其他使用方式(推荐)
Posted 坤小
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axios02-其他使用方式(推荐)相关的知识，希望对你有一定的参考价值。
-
推荐这种方式原因：
和以前的$.ajax()非常类似-
不同点： 使用promise技术处理异步操作结果
-
axios( url:'请求路径', method:'请求方式', data: post请求参数 , params: get请求参数 ).then(res=> //成功回调 //console.log(res) );
-
/*
1.学习目标介绍 ： axios其他使用方式
2.学习路线 ：
(1)复习上一小节介绍的两种方式
axios.get().then()
axios.post().then()
(2)介绍第三种使用方式
axios(
url:'请求路径',
method:'请求方式',
data: post请求参数 ,
params: get请求参数
).then(res=>
//成功回调
//console.log(res)
);
*/
<!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其他使用方式
2.学习路线 ：
(1)复习上一小节介绍的两种方式
axios.get().then()
axios.post().then()
(2)介绍第三种使用方式
axios(
url:'请求路径',
method:'请求方式',
data: post请求参数 ,
params: get请求参数
).then(res=>
//成功回调
//console.log(res)
);
*/
//基本使用
btn1.onclick = function ()
axios(
url: 'https://autumnfish.cn/api/joke',
method: 'get',
).then(res =>
console.log(res);
)
;
//get请求
btn2.onclick = function ()
/*
细节： 如果get参数很少，可以使用ES6模板字符串直接在url拼接
如果get参数很多，建议写在params中
*/
var num = 10;
axios(
url: `https://autumnfish.cn/api/joke/list?num=$num`,
method: 'get',
// params:
// num:10
//
).then(res =>
console.log(res);
)
;
//post请求
btn3.onclick = function ()
axios(
url: 'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',
method: 'post',
data:
mobile: '18801185985',
code: '246810'
).then(res =>
console.log(res);
)
;
</script>
</body>
</html>
以上是关于axios02-其他使用方式(推荐)的主要内容，如果未能解决你的问题，请参考以下文章