代码项目
[ax_axios_尚硅谷 - 快捷方式.lnk](..\ab_code\ax_axios_尚硅谷 - 快捷方式.lnk)
get请求
返回内容
代码
带参数get请求
返回内容
错误的搭配params和post
奇怪现象
理解
post请求_提交数据
post请求多数时候用来提交数据,当然也课查询数据,误绝对化.
输出效果
- 提交之后,浏览器会自动刷新
put请求_修改数据
失败图
成功图
delete请求_删除数据
效果图
增删改查(get post put delete)总结
发送get请求的三种方式
代码图
axios既可以当函数axios()使用,又可以当做对象axios.request(),axios.get()使用
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>axios其他使用</title>
<link
crossorigin="anonymous"
href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">get请求的几种方式</h2>
<button class="btn btn-primary">axios()函数发送GET请求</button>
<button class="btn btn-warning">axios.request()函数发送GET请求</button>
<button class="btn btn-success">axios.get()函数发送GET请求</button>
</div>
<script>
//获取按钮
const btns = document.querySelectorAll("button");
btns[0].onclick = function () {
//axios()函数发送GET请求
axios({
method: "GET",
url: "http://localhost:3000/posts/",
params: {
id: 1,
},
}).then((res) => {
console.log(res.data);
});
};
btns[1].onclick = function () {
//axios.request()函数发送GET请求
axios
.request({
method: "GET",
url: "http://localhost:3000/posts",
params: {
id: 2,
},
})
.then((res) => {
console.log(res.data);
});
};
btns[2].onclick = function () {
// axios.get()函数发送GET请求
axios
.get("http://localhost:3000/posts", {
params: {
id: 3,
},
})
.then((res) => {
console.log(res.data);
});
};
</script>
</body>
</html>
发送post请求的三种方式
代码图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>axios其他使用</title>
<link
crossorigin="anonymous"
href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">POST请求的几种方式</h2>
<button class="btn btn-primary">axios()函数发送POST请求</button>
<button class="btn btn-warning">axios.request()函数发送POST请求</button>
<button class="btn btn-success">axios.post()函数发送POST请求</button>
</div>
<script>
//获取按钮
const btns = document.querySelectorAll("button");
btns[0].onclick = function () {
//axios()函数发送POST请求
axios({
method: "POST",
url: "http://localhost:3000/posts/",
data: {
title: "这是使用axios()通过post请求提交的文章",
author: "Alice",
},
});
};
btns[1].onclick = function () {
//axios.request()函数发送POST请求
axios.request({
method: "POST",
url: "http://localhost:3000/posts",
data: {
title: "这是通过axios.request()通过post提交的文章",
author: "Bruce",
},
});
};
btns[2].onclick = function () {
// axios.post()函数发送POST请求
axios.post("http://localhost:3000/posts", {
data: {
title: "这是通过axios.post()提交的文章",
author: "Celina",
},
});
};
</script>
</body>
</html>
axios的默认配置
对于没有指定的配置,会使用默认的配置
对于指定的配置,则会覆盖默认的配置
axios实例对象
创建实例
实例方法
多个实例对象
拦截器
拦截器的执行顺序
取消请求
