草庐IT

【网络请求之Axios】axios的基础用法

想做一只快乐的修狗 2023-04-09 原文

1. axios概述

  1. axios 是一个专注于网络请求的库。
  2. axios 在请求到数据之后，在真正的数据之外，套了一层外壳。

2.axios的基本使用

2.1 发送get请求

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnGet">发送GET请求</button>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document.querySelector("#btnGet").addEventListener("click", function () {
        axios({
          // 请求方式
          method: "GET",
          // 请求地址
          url: "http://www.liulongbin.top:3006/api/getbooks",
          // URL中的查询参数
          params: {
            id: 2,
          },
        }).then(function(result) {
            console.log(result);
        })
      });
    </script>
  </body>
</html>

结果：

2.2 发送post请求

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>


      document.querySelector('#btnPost').addEventListener('click', function() {
        axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            // 请求体参数
            data: {
                name: 'zs',
                age: 12,
            }
        }).then(function(result) {
            console.log(result);
        })
      })
    </script>
  </body>
</html>

结果：

3. 使用async…await、解构赋值对代码进行改造

3.1 为什么可以要使用async/await？


结果：

axios的返回值是一个Promise类型。

3.2 以发送post请求为例

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document.querySelector("#btnPost").addEventListener("click", async function () {
        // 解构赋值的时候，使用 : 进行重命名
        // 1. 调用 axios 之后，使用 async/await 进行简化
        // 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
        // 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
        const { data: res } = await axios({
          method: "POST",
          url: "http://www.liulongbin.top:3006/api/post",
          // 请求体参数
          data: {
            name: "zs",
            age: 12,
          },
        });
        console.log(res);
      });
    </script>
  </body>
</html>

结果：

4.使用axios直接发送请求

4.1 使用axios直接发送get请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnGet">发送GET请求</button>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document
        .querySelector("#btnGet")
        .addEventListener("click", async function () {
          const { data: res } = await axios.get(
            "http://www.liulongbin.top:3006/api/getbooks",
            {
              params: {
                id: 3,
              },
            }
          );
          console.log(res.data);
        });
    </script>
  </body>
</html>

结果：

4.2 使用axios直接发送post请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document
        .querySelector("#btnPost")
        .addEventListener("click", async function () {
          const { data: res } = await axios.post(
            "http://www.liulongbin.top:3006/api/post",
            { name: "zs", age: 20 }
          );
          console.log(res);
        });
    </script>
  </body>
</html>

注意：这里的请求体参数可以直接写在{}中，而不用加data
结果：

5. 参考

黑马vue视频，感谢llb老师。

建议学习axios之前先了解一下http协议。

用法Axiosquotspanclass

有关【网络请求之Axios】axios的基础用法的更多相关文章

  1. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  2. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. 网络编程套接字 - 2

    网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑：需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手（建立连接）数据传输四次挥手（断开连接）TCP和UDP对比网络编程基础知识

  5. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  6. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  7. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  8. ruby - HTTP 请求中的用户代理，Ruby - 2

    我是Ruby的新手。我试过查看在线文档，但没有找到任何有效的方法。我想在以下HTTP请求botget_response()和get()中包含一个用户代理。有人可以指出我正确的方向吗？#PreliminarycheckthatProggitisupcheck=Net::HTTP.get_response(URI.parse(proggit_url))ifcheck.code!="200"puts"ErrorcontactingProggit"returnend#Attempttogetthejsonresponse=Net::HTTP.get(URI.parse(proggit_url)

  9. ruby-on-rails - 获取并发布相同匹配项的请求 - 2

    在我的路线文件中我有:match'graphs/(:id(/:action))'=>'graphs#(:action)'如果是GET请求(工作)或POST请求(不工作)，我想匹配它我知道我可以使用以下方法在资源中声明POST请求:post'/'=>:show,:on=>:member但是我怎样才能为比赛做到这一点呢？谢谢。 最佳答案 如果你同时想要POST和GETmatch'graphs/(:id(/:action))'=>'graphs#(:action)',:via=>[:get,:post]编辑默认值可以设置如下match'g

  10. ruby - 检查网络文件是否存在，而不下载它？ - 2

    是否可以在不实际下载文件的情况下检查文件是否存在？我有这么大的(~40mb)文件，例如:http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm这与ruby​​不严格相关，但如果发件人可以设置内容长度就好了。RestClient.get"http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm",headers:{"Content-Length"=>100} 最佳答案

随机推荐