Axios 学习笔记 2021年10月23日

最新推荐文章于 2022-07-14 19:33:35 发布

宇宙无敌饼干小怪兽

最新推荐文章于 2022-07-14 19:33:35 发布

阅读量486

点赞数

分类专栏： Axios 文章标签： axios

本文链接：https://blog.csdn.net/zhuoss/article/details/120925369

版权

Axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码项目

[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>
    <meta charset="UTF-8" />
    <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>
    <meta charset="UTF-8" />
    <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实例对象

创建实例

实例方法

多个实例对象

拦截器

拦截器的执行顺序

取消请求

宇宙无敌饼干小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios 学习笔记 2021年10月23日

文章目录代码项目get请求返回内容代码带参数get请求返回内容错误的搭配params和post奇怪现象理解post请求_提交数据输出效果put请求_修改数据失败图成功图delete请求_删除数据效果图增删改查(get post put delete)总结发送get请求的三种方式代码图代码发送post请求的三种方式代码图代码axios的默认配置axios实例对象创建实例实例方法多个实例对象拦截器拦截器的执行顺序取消请求代码项目[ax_axios_尚硅谷 - 快捷方式.lnk](…\ab_code\ax_a
复制链接

扫一扫