axios的学习

news2024/9/22 5:31:31

axios是基于promise对ajax的一种封装

//将省份信息打印到网页上
<p class="my-p"></p>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios({
    url:'http://hmajax.itheima.net/api/province'
  }).then(result=>{
    console.log(result)
    console.log(result.data.list)
    console.log(result.data.list.join('<br>'))
    document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')
  })
</script>

axios-查询参数 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios({
    url:'目标资源地址',
    params:{
      参数名:值
    }
  }).then(result=>{
    //对服务器返回的数据做后序处理
  })
</script>

查询省份信息：

//查询省份
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios({
    url:'https://hmajax.itheima.net/api/city',
    params:{
      pname:'湖南省'
    }
  }).then(result=>{
    //对服务器返回的数据做后序处理
    console.log(result)
    console.log(result.data.list)
    document.querySelector('p').innerHTML=result.data.list.join('<br>')
  })
</script>

请求方法：

3a21562242984d3a94d4e6483df686d4.png

 axios请求配置：

语法： 

axios({
    url:'目标资源地址',
    method:'请求方法',
    data:{
      参数值:值
    }
  }).then((result=>{
    //服务器返回的数据做后续处理
          })
  )

method：请求的方法，GET可以省略

axios错误处理

语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({
  //请求选项
}).then(result=>{
  //处理数据
}).catch(error=>{
  //处理错误
})

注册账号及账号重复的报错：

<button class="btn">注册用户</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  document.querySelector('.btn').addEventListener
  ('click',()=>{
    axios({
      url:'http://hmajax.itheima.net/api/register',
      method:'post',
      data:{
        username:'itheima389754758958',
        password:'123456'
      }
    }).then(result=>{
              console.log(result)
    }).catch(error=>{
      console.log(error)
      alert(error.response.data.message)
    })
  })
</script>

HTTP协议 - 请求报文

HTTP协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

请求报文的组成部分：

  • 请求行：请求方法，URL，协议
  • 请求头：以键值对的格式携带的附加信息，比如：Content-Type
  • 空行：分隔请求头，空行之后是发送给服务器的资源
  • 请求体：发送到资源

请求报文排查错误原因，并修复输入正确的用户名和密码无法登录：

HTTP协议 - 响应报文

HTTP协议：规定了按照HTTP协议要求的格式，返回给浏览器的内容

  • 响应头（状态行）：协议，HTTP响应状态码，状态信息
  • 响应头：以键值对的格式携带的附加信息，比如：Content-Type
  • 空行：分隔响应头，空行之后是发送给服务器的资源
  • 响应体：返回的资源

HTTP响应状态码：用来表明是否成功完成。

83f10e6e525e48e18df46ae6752f8a6b.png

接口文档

接口文档:描述接口的文章

接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数

  axios({
      url:'http://hmajax.itheima.net/api/city',
      method:'get',
      params:{
          pname:'辽宁省'
      }
  })

form-serialize插件

作用：快速收集表单元素的值

语法：

const form = document.querSelector ('.example-from')

const data=serialize(form, {hash: true, emty: true})

    </form>
<!--    目标；在点击提交时，使用form-serialize插件，快速手机表单元素值-->
<!--    把插件引入到自己的网页中-->
    <script src="../lib/form-serialize.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click',()=>{
            // 使用serialize函数，快速手机表单元素的值
            // 参数1；要获取那个表单的数据
            // 表单元素设置name属性，值会作为对象的属性名
            // 参数2：配置对象
            // hash  设置获取数据结构
            //    -true：JS对象（推荐）一般请求里提交给服务器
            //    -false：查询字符串
            // empty设置是否获取空值
            const form=document.querySelector('.example-form')
            const data=serialize(form,{hash:true,empty:true})
            console.log(data)
        })
    </script>

Bootstrap弹框

功能：不离开当前页面，显示单独内容，供用户操作

步骤

  • 引入bootstrap.css和bootstrap.js
  • 准备弹框标签，确认结构
  • 通过自定义属性，控制弹框的显示和隐藏
<button data-bs-toggle="modal" data-bs-target="css选择器">显示弹框</button>
<button data-bs-dismiss="modal">Close</button>

通过JS控制，弹框显示或隐藏

    // 创建弹框对象
    const modalDom=document.querySelector('css选择器')
    const modal=new bootstrap.Modal(modalDom)
    // 显示弹框
    modal.show()
    // 隐藏弹框
    modal.hide()

AJAX原理-XMLHttpRequest

XMLHttpRequest（XML）对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据，这允许网页在不影响用户操作的情况下，更新页面的局部内容，XML在AJAX编程中被大量使用

关系：axios内部采用XMLHttpRequest与服务器交互

步骤：

  1. 创建XMLHttpRequest对象
  2. 配置请求方法和请求url地址
  3. 监听loadend事件，接收响应结果
  4. 发起请求

语法：

const xhr=new XMLHttpRequest()
xhr.open('请求方法','请求url网址')
xhr.addEventListener('loadend',()=>{
    console.log(xhr.response)
})
xhr.send()

XMLHttpReqest-查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

语法：
//创建URLSearchParams对象
const paramsObj=new URLSearchParams({
  参数名1:值1,
  参数名2:值2
})
//生成指定格式查询参数，字符串
const queryString =paramsObj.toString()
//结果:参数名1=值1&参数名2=值2

XMLHttpRequest-数据提交

需求：通过XHR提交用户名和密码，完成注册功能

请求头设置：Content-type:application/json

请求头携带JSON字符串

语法：

const xhr=new XMLHttpRequest()
  xhr.open('请求方法','请求url网址')
  xhr.addEventListener('loadend',()=>{
    console.log(xhr.response)
  })
  //告诉服务器，传递的内容类型，是JSON字符串
  xhr.setRequestHeader('Content-Type','application/json')
  //准备数据并转成JSON字符串
  const user={username:'itheima007',password:'7654321'}
  const userStr=JSON.stringify(user)
  //发送请求体数据
  xhr.send(userStr)

Promise

对象用于表示一个异步操作的最终完成（或失败）及其结果值

好处：逻辑清晰，了解axios函数内部运行机制，能解决回调函数地狱问题

//创建Promise对象
const p=new Promise((resolve,reject)=>{
  //执行异步任务
  //成功调用：resolve(值)触发then()执行
  //失败调用：reject(值)触发catch()执行
})
//接受结果
p.then(result=>{
  //成功
}).catch(error=>{
  //失败
})

Promise-三种状态

作用：了解Promise对象如何处理关联的处理函数，以及代码执行顺序

概念：一个Promise对象，必然处于以下的几种状态之一

  • 待定：初识状态，没有被对线，也没有被拒绝
  • 已兑现：意味着操作成功
  • 已拒绝：意味着操作失败

Promise对象一旦被兑现或拒绝，就是已经敲定了，状态无法被改变

同步代码和异步代码

同步代码：浏览器是按照书写代码的顺序一行一行执行程序的，浏览器会等待底阿妈的解析和工作，在上一行完成后才会执行下一行

  • 逐步执行，虚原地等待结果，才继续向下执行

异步代码：可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成，程序也将在任务完成后显示结果

  • 调用后耗时，不阻塞代码继续执行，不必原地等待，在将来完成后触发一个回调函数
  • setTimeout，setInterval

回调函数地狱

概念：在回调函数中嵌套回调函数，一直嵌套下去

缺点：可读性差，异常无法捕获，耦合性严重

Promise-链式调用

概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束

细节：then()回调函数中的返回值，会影响新生成的Promise对象 最终状态和结果

优点：通过链式调用，解决回调函数嵌套问题

new Promise -> .then（回调函数）-> 新的Promise对象

async函数和await

概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值

async函数是使用async关键字声明的函数，async函数式AsyncFunction构造函数的实例，并且其中允许使用await关键字。

async和await关键字可以写出局域Promise的异步行为，而无需刻意调用Promise。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  async function getData(){
    const pObj=await axios({url:'http://hmajax.itheima.net/api/province'})
    const pname=pObj.data.list[0]
    const cObj=await axios({url:'http://hmajax.itheima.net/api/city',params: {pname}})
    const cname=cObj.data.list[0]
    const aObj=await axios({url:'http://hmajax.itheima.net/api/area',params: {pname, cname}})
    console.log(aObj)
    document.querySelector('.pname').innerHTML=pname
    document.querySelector('.cname').innerHTML=cname
  }
  getData()
</script>

async函数和await捕获错误：

使用try…catch，标记要尝试的语句块，并指定一个出现异常时抛出的响应

语法：

try{
  //要执行的代码
}catch (error){
  //error接受的是错误信息
  //try里代码，如果有错误，直接进入这里执行
}

如果try预计中某行代码报错后，try中剩余的代码不会执行了

cb886ee95ec146b8a1b474d16d983ea0.png

在第四个链接处出错，会导致try中剩余的代码不会执行 

5d1092407db44086b237a7c5047a20bb.png

事件循环

概念：JavaScript有一个基于事件循环的并发模型，事件循环

好处：掌握JavaScript是如何安排和运行代码的赋值执行代码，收集和处理事件以及执行队列中的子任务。

原因：JavaScript单线程（某一刻只能执行一行代码，为了让耗时代码不阻塞其他代码运行，设计了时间循环模型）

事件循环-执行过程：

执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制

宏任务与微任务

异步任务分为：

  • 宏任务：有浏览器环境执行的异步代码
  • 微任务：有JS引擎环境执行的异步代码

4edda694186a4fc2b047be9893807461.png

c61c8e11ee264235b940906a4a9a26f2.png

Promise本身是同步的，但是then和catch回调函数是异步的，其异步输入微任务队列，比宏任务队列先执行

Promise.all静态方法

概念：合并多个Promise对象，等待所有同时成功完成（或一个失败），做后续逻辑

 

3cec6de121764cc78bdea01bf8d8c053.png

const p=Promise.all([Promise对象,Promise对象,…])
p.then(result=>{
    //result结果：[Promise对象成功结果，Promise对象成功结果，……]
}).catch((error=>{
    //第一个失败的Promise对象，抛出的异常
}))

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/733075.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【PCIE】hot-reset和link disable

【PCIE】hot-reset和link disable

Hot reset 规则 如果上游伪端口&#xff08;Pseudo Port&#xff09;的任何一个通道连续接收到两个带有热复位位设置为1b、禁用链路位和回环位设置为0b的TS1有序集合&#xff0c;并且两个伪端口上的任何一个通道&#xff08;接收到TS1有序集合&#xff09;要么收到EIOS&#xf…
阅读更多...
java方法的覆盖（Overriding ）和隐藏（Hiding）

java方法的覆盖（Overriding ）和隐藏（Hiding）

Java方法的覆盖&#xff08;Overriding &#xff09;针对的是实例方法&#xff08;即非静态方法&#xff09;&#xff0c;而方法的隐藏&#xff08;Hiding&#xff09;针对的是类方法&#xff08;即静态方法&#xff09;。 方法的覆盖和隐藏指的是子类对从父类继承的方法进行重…
阅读更多...
基于simulink基于颜色分割方法跟踪人员的面部和手部（附源码）

基于simulink基于颜色分割方法跟踪人员的面部和手部（附源码）

一、前言 此示例演示如何使用基于颜色的分割方法跟踪人员的面部和手部。 二、模型 下图显示了颜色分割示例模型&#xff1a; 三、颜色分割结果 为了为示例创建准确的颜色模型&#xff0c;处理了许多包含肤色样本的图像&#xff0c;以计算 Cb 和 Cr 颜色通道的均值 &#xf…
阅读更多...
基于Unity2017版本的2D3D Infinite Runner Engine 1.5.1二维三维跑酷游戏模板

基于Unity2017版本的2D3D Infinite Runner Engine 1.5.1二维三维跑酷游戏模板

基于Unity2017版本的2D3D Infinite Runner Engine 1.5.1二维三维跑酷游戏模板 有多种游戏模式 还有个竖屏的玩法 工程地址&#xff1a;https://download.csdn.net/download/Highning0007/88020755
阅读更多...
MFC学习日记(一)——创建新项目

MFC学习日记(一)——创建新项目

此系列所有文章参考链接&#xff1a;http://www.jizhuomi.com/software/141.html 点击file新建项目创建一个MFC新项目 点击确定 点击下一步 选择应用程序类型 我们看到有四种类型&#xff1a;Single document&#xff08;单文档&#xff09;、Multiple documents&#xff…
阅读更多...
传统图像处理之目标检测——人脸识别

传统图像处理之目标检测——人脸识别

代码实战&#xff1a;人脸识别 import numpy as np import cv2 img cv2.imread("3.webp")face_cascade cv2.CascadeClassifier(r./haarcascade_frontalface_default.xml)gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)#探测图片中的人脸 faces face_cascade.detec…
阅读更多...
Android kotlin 实现把多个控件整体上下拉回弹功能(添加是否禁用顶部和底部回弹的参数设置，以及回弹效果结束监听)

Android kotlin 实现把多个控件整体上下拉回弹功能(添加是否禁用顶部和底部回弹的参数设置，以及回弹效果结束监听)

目录 一、实现效果二、源码1、上下拉回弹，自定义ScrollView2、主activity一、实现效果 二、源码 1、上下拉回弹，自定义ScrollView 上下拉回弹，自定义ScrollView，ReboundScrollView.kt package com.example.myapplication3.myviewimport android.content.Context import
阅读更多...
Netty核心技术九--TCP 粘包和拆包及解决方案

Netty核心技术九--TCP 粘包和拆包及解决方案

1. TCP 粘包和拆包基本介绍 **TCP是面向连接的&#xff0c;面向流的&#xff0c;提供高可靠性服务。收发两端&#xff08;客户端和服务器端&#xff09;都要有一一成对的socket&#xff0c;因此&#xff0c;发送端为了将多个发给接收端的包&#xff0c;更有效的发给对方&#x…
阅读更多...
OpenCV 入门教程：图像的基本操作和处理

OpenCV 入门教程：图像的基本操作和处理

OpenCV 入门教程&#xff1a;图像的基本操作和处理 导语一、图像的基本操作1.1 获取图像的大小1.2 访问图像的像素1.3 修改图像的像素值 二、图像的基本处理2.1 图像的灰度化2.2 图像的平滑处理2.3 图像的边缘检测 总结 导语 在计算机视觉和图像处理领域&#xff0c;对图像进行…
阅读更多...
Spring Boot 中的 CompletableFuture 类是什么，如何使用？

Spring Boot 中的 CompletableFuture 类是什么，如何使用？

Spring Boot 中的 CompletableFuture 类是什么&#xff0c;如何使用&#xff1f; 介绍 在开发企业级应用程序时&#xff0c;我们经常需要异步执行任务。异步执行任务可以提高应用程序的性能和响应能力。在 Java 8 中&#xff0c;引入了 CompletableFuture 类&#xff0c;它提…
阅读更多...
zabbix 监控 windows 系统、java应用、SNMP

zabbix 监控 windows 系统、java应用、SNMP

目录 一、部署 zabbix 监控 windows系统 1.下载 Windows 客户端 Zabbix agent 2 2.安装客户端&#xff0c;在监控的windows主机上配置 3.在服务端 Web 页面添加主机&#xff0c;关联模板 二、部署 zabbix 监控 Java应用 1.客户端开启 java jmxremote 远程监控功能 1.1配置…
阅读更多...
finalshell上传文件到虚拟机一直失败

finalshell上传文件到虚拟机一直失败

目录 1.首先看一下你的虚拟机的可用空间是否足够 2.查看是否是root用户 1.首先看一下你的虚拟机的可用空间是否足够 在finalshell查看即可 如果空间不够则将虚拟机关机 &#xff0c;右键虚拟机找到设置&#xff0c;找到硬盘 &#xff08;我这里演示的是VMwareFusion&#xff…
阅读更多...
Linux--冯诺依曼体系结构

Linux--冯诺依曼体系结构

【Linux】冯诺依曼体系结构、操作系统及进程概念_linux io 冯诺依曼_平凡的人1的博客-CSDN博客 存储器指的是内存还是磁盘&#xff1f; 内存 输入设备&#xff1a;键盘、摄像头、话筒、磁盘、网卡... 输出设备&#xff1a;显示器、音响、磁盘、网卡... CPU: 运算器&#x…
阅读更多...
Jetpack compose——深入了解Diffing

Jetpack compose——深入了解Diffing

Diffing是什么 "Diffing" 是 Jetpack Compose 中用于优化性能的一种技术。它的工作原理是比较新旧 UI 树&#xff0c;并只更新实际发生变化的部分。这意味着即使你的应用有大量的 UI&#xff0c;Compose 也能保持高效的性能。 当 Composable 函数被重新调用&#x…
阅读更多...
医学图像增强系统的设计_kaic

医学图像增强系统的设计_kaic

目录 1绪论 1.1课题背景 1.2医学图像增强以及相关理论的现状2 1.3本文内容安排 2图像增强技术 2.1空域增强方法 2.1.1空域点运算增强方法 2.1.2空域滤波增强方法 2.2频域增强算法 2.2.1低通滤波 2.2.2高通滤波 2.2.3同态滤波 2.3本章小结 3医学图像增强算法 3.1医学图像的特点 …
阅读更多...
Unity跑酷小游戏-警察捉小偷

Unity跑酷小游戏-警察捉小偷

Unity跑酷小游戏-警察捉小偷 WRPUltimate3DEndlessRunnerKit2017 采用Unity2017版本运行 NGUI版本较旧&#xff0c;需要更新NGUI的版本或者换成UGUI Assets/NGUI/Scripts/UI/UIAnchor.cs(73,53): error CS0619: UnityEngine.RuntimePlatform.WindowsWebPlayer is obsolete:…
阅读更多...
【观察】新五丰联合华为“躬身实践”，推动猪场实现智慧化跨越升级

【观察】新五丰联合华为“躬身实践”，推动猪场实现智慧化跨越升级

中国是全球的生猪生产和消费大国&#xff0c;生猪存栏量、出栏量以及猪肉产量均居世界第一。不仅如此&#xff0c;我国的人口数量和饮食结构还决定了猪肉在国内肉类消费中具有“不可撼动”的地位&#xff0c;可以说猪肉的供应与国计民生息息相关。 数据显示&#xff0c;2022年中…
阅读更多...
MySQL外键约束使用案例

MySQL外键约束使用案例

MySQL外键约束使用 语法:FOREIGN KEY (外键列名)REFERENCES 主表(参照列)案例 创建课程表和班级表 创建学生表
阅读更多...
Linux —— Gitee

Linux —— Gitee

目录 一&#xff0c;介绍 二&#xff0c;使用 一&#xff0c;介绍 用于代码托管、版本控制、多人协助等&#xff1b; Gitee是开源中国&#xff08;OSChina&#xff09;推出的基于Git的代码托管服务&#xff1b;深圳市奥思网络科技有限公司&#xff1b; 二&#xff0c;使用 网…
阅读更多...
tidb之旅——资源管控

tidb之旅——资源管控

作者&#xff1a; 有猫万事足 原文来源&#xff1a; https://tidb.net/blog/26695303 前言 在我的设想里面&#xff0c;我应该不会这么早用到这个特性&#xff0c;原因很简单&#xff0c;整个TiDB集群根本不涉及多租户的使用场景。 应该说目前TiDB集群中的用户就2个&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023