代码项目

[ax_axios_尚硅谷 - 快捷方式.lnk](..\ab_code\ax_axios_尚硅谷 - 快捷方式.lnk)

get请求

返回内容

代码

带参数get请求

返回内容

错误的搭配params和post

奇怪现象

Honeycam 2021-10-21 16-33-12

理解

post请求_提交数据

post请求多数时候用来提交数据,当然也课查询数据,误绝对化.

输出效果

提交之后,浏览器会自动刷新

Honeycam 2021-10-21 16-38-03

put请求_修改数据

失败图

Honeycam 2021-10-21 16-51-36

Honeycam 2021-10-21 16-53-17

Honeycam 2021-10-21 16-55-17

成功图

Honeycam 2021-10-21 16-57-06

delete请求_删除数据

效果图

Honeycam 2021-10-21 17-09-54

增删改查(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实例对象

创建实例

实例方法

多个实例对象

拦截器

拦截器的执行顺序

取消请求

posted on 2021-10-23 19:58 超级无敌美少男战士阅读(83) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

怪物奇妙物语

最新随笔

我的标签

积分与排名

随笔分类 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

代码项目

get请求

返回内容

代码

带参数get请求

返回内容

错误的搭配params和post

奇怪现象

理解

post请求_提交数据

输出效果

put请求_修改数据

失败图

成功图

delete请求_删除数据

效果图

增删改查(get post put delete)总结

发送get请求的三种方式

代码图

代码

发送post请求的三种方式

代码图

代码

axios的默认配置

axios实例对象

创建实例

实例方法

多个实例对象

拦截器

拦截器的执行顺序

取消请求

	<!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>