1. axios简介

axios 是一个基于 Promise 的 HTTP 客户端,主要用于浏览器和 Node.js 环境中发送 HTTP 请求。它是目前前端开发中最流行的网络请求库之一,被广泛应用于各种 JavaScript 项目(如 React、Vue、Angular 等框架或原生 JS 项目)。

        核心特点

  • 支持浏览器和 Node.js⭐:在浏览器中使用 XMLHttpRequest 发送请求,在 Node.js 中使用 http 模块,实现了跨环境兼容。
  • 基于 Promise⭐:支持 Promise API,可配合 async/await 使用,让异步请求代码更简洁、易读。
  • 拦截请求和响应⭐:可以在请求发送前或响应返回后进行拦截处理(如添加请求头、处理错误、加载状态管理等)。
  • 自动转换 JSON 数据⭐:请求时会自动将数据转为 JSON 格式,响应时会自动解析 JSON 数据,无需手动处理。
  • 取消请求:支持取消正在进行的 HTTP 请求,避免无效请求浪费资源。
  • 超时处理:可以设置请求超时时间,超时后自动中断请求。
  • 客户端防止 XSRF:提供了防御跨站请求伪造(XSRF)的机制。

 

2. axios请求地址

链接请求方式:功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 本地导入方式:例子:在同目录下的js文件里的本地axios文件

<script src="js/axios.min.js"></script>

 

3. axios的基本结构

var myurl = "需要请求的页面以及参数"
axios.get(myurl).then(function(res))

myurl指的是向后台请求的页面以及自定义访问的参数

res指后台响应请求后传递回的参数,数据格式一般为json,用Vue中的data来接收

举例:向后台servlet的class.do发送操作请求op=classList

var app=new Vue({el: "#app",data:{classesList:[]},methods:{searchClass:function () {var than = thisvar myurl="http://localhost:8080/class.do?op=classesList"axios.get(myurl).then(function (res) {than.classesList=res.data})}}
})

如果myurl传递参数多,则使用axios.post(myurl)方法。

进阶:axios的标准格式为

axios.get(myurl,headers{})

其中myurl为传递参数地址,header{}为请求头

如果传递参数过多,则使用post:

axios.post(myurl,body,headers)axios.post(myurl,{'key':'value','key2':'value',...},headers{'token':'value'})

myurl为传递参数的地址,

body为传递的参数map,

headers为传递的请求头。

附录:

请求头 headers 简介

在 HTTP 协议中,请求头(Request Headers)是客户端(如浏览器)向服务器发送请求时携带的附加信息。它们以键值对的形式存在,用于描述请求的元数据(如浏览器类型、请求的资源类型、缓存策略等),帮助服务器理解如何处理请求。

理解请求头是开发和调试 HTTP 应用的基础,合理设置请求头可优化性能、增强安全性,并确保客户端与服务器正确交互。

1. 通用头(General Headers)

适用于请求和响应,但与具体数据无关:

  • Cache-Control:控制缓存策略(如no-cachemax-age=3600)。
  • Connection:控制连接状态(如keep-aliveclose)。
  • Date:请求的日期和时间。
  • Pragma:兼容性缓存指令(如no-cache)。
  • Transfer-Encoding:数据传输编码方式(如chunked)。

2. 请求头(Request-Specific Headers)

描述请求的特定信息:

  • Accept:客户端可接受的响应内容类型(如application/jsontext/html)。
  • Accept-Charset:客户端可接受的字符集(如utf-8iso-8859-1)。
  • Accept-Encoding:客户端可接受的内容编码(如gzipdeflatebr)。
  • Accept-Language:客户端可接受的自然语言(如zh-CNen-US)。
  • Authorization:身份验证信息(如Bearer tokenBasic base64)。
  • Cookie:客户端存储的 Cookie 信息。
  • Host:请求的服务器域名和端口(如www.example.com:443)。
  • Origin:发起跨域请求的源(如https://example.com)。
  • Referer:前一个页面的 URL(拼写错误但被广泛接受)。
  • User-Agent:客户端信息(如浏览器类型、操作系统,如Mozilla/5.0 (Windows NT 10.0)...)。

3. 实体头(Entity Headers)

描述请求体的元数据(若有请求体):

  • Content-Length:请求体的长度(字节)。
  • Content-Type:请求体的媒体类型(如application/jsonmultipart/form-data)。
  • Content-Encoding:请求体的编码方式(如gzip)。
  • Content-Language:请求体的自然语言(如zh-CN)。

Axios(HTTP 客户端)

axios.post('https://api.example.com/data', { key: 'value' }, {headers: {'Content-Type': 'application/json','Authorization': 'Bearer your_token'}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/88777.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/88777.shtml
英文地址,请注明出处:http://en.pswp.cn/pingmian/88777.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过Tcl脚本命令:set_param labtools.auto_update_hardware 0

1.通过Tcl脚本命令&#xff1a;set_param labtools.auto_update_hardware 0 禁用JTAG上电检测&#xff0c;因为2016.1 及更高版本 Vivado 硬件管理器中&#xff0c;当 FPGA正连接编程电缆时 重新上电&#xff0c;可能会出现FPGA无法自动加载程序的故障。 2.还可以通过 hw_serv…

Spring Boot 安全登录系统:前后端分离实现

关键词&#xff1a;Spring Boot、安全登录、JWT、Shiro / Spring Security、前后端分离、Vue、MySQL 详细代码请参考这篇文章&#xff1a;完整 Spring Boot Vue 登录 ✅ 摘要 在现代 Web 应用中&#xff0c;用户登录与权限控制是系统安全性的基础环节。本文将手把手带你实现…

Docker高级管理--Dockerfile 镜像制作

目录 一&#xff1a;Docker 镜像管理 1:Docker 镜像结构 &#xff08;1&#xff09; 镜像分层核心概念 &#xff08;2&#xff09;镜像层特性 &#xff08;3&#xff09;关键操作命令 &#xff08;4&#xff09;优化建议 2&#xff1a;Dockerfile介绍 &#xff08;1&…

Leetcode力扣解题记录--第42题 接雨水(动规和分治法)

题目链接&#xff1a;42. 接雨水 - 力扣&#xff08;LeetCode&#xff09; 这里我们可以用两种方法去解决巧妙地解决这个题。首先来看一下题目 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。…

宝塔配置pgsql可以远程访问

本地navicat premium 17.0 可以远程访问pgsql v16.1宝塔的软件商店里&#xff0c;找到pgsql管理器&#xff1b;在pgsql管理器里找到客户端认证&#xff1a;第二步&#xff1a;配置修改&#xff0c;CtrlF 查找listen_addresses关键字&#xff1b;第三步&#xff1a;在navicat里配…

小架构step系列12:单元测试

1 概述 测试的种类很多&#xff1a;单元测试、集成测试、系统测试等&#xff0c;程序员写代码进行测试的可以称为白盒测试&#xff0c;单元测试和集成测试都可以进行白盒测试&#xff0c;可以理解为单元测试是对某个类的某个方法进行测试&#xff0c;集成测试则是测试一连串的…

SpringBoot3-Flowable7初体验

目录简介准备JDKMySQLflowable-ui创建流程图要注意的地方编码依赖和配置控制器实体Flowable任务处理类验证启动程序调用接口本文源码参考简介 Flowable是一个轻量的Java业务流程引擎&#xff0c;用于实现业务流程的管理和自动化。相较于老牌的Activiti做了一些改进和扩展&…

phpMyAdmin:一款经典的MySQL在线管理工具又回来了

phpMyAdmin 是一个免费开源、基于 Web 的 MySQL/MariaDB 数据库管理和开发工具。它提供了一个直观的图形用户界面&#xff0c;使得我们无需精通复杂的 SQL 命令也能执行大多数数据库管理任务。 phpMyAdmin 项目曾经暂停将近两年&#xff0c;不过 2025 年又开始发布新版本了。 …

存储服务一NFS文件存储概述

前言&#xff1a; 网络文件系统&#xff08;Network File System&#xff0c;NFS&#xff09;诞生于1984年&#xff0c;由Sun Microsystems首创&#xff0c;旨在解决异构系统间的文件共享需求。作为一种基于客户端-服务器架构的分布式文件协议&#xff0c;NFS允许远程主机通过T…

libimagequant 在 mac 平台编译双架构

在 macOS 上编译 libimagequant 的双架构&#xff08;aarch64 x86_64&#xff09;通用二进制库&#xff0c;以下是完整步骤&#xff1a;​​1. 准备 Rust 工具链​​ # 安装两个目标平台 rustup target add aarch64-apple-darwin x86_64-apple-darwin# 确认安装成功 rustup ta…

暑期自学嵌入式——Day01(C语言阶段)

点关注不迷路哟。你的点赞、收藏&#xff0c;一键三连&#xff0c;是我持续更新的动力哟&#xff01;&#xff01;&#xff01; 主页&#xff1a; 一位搞嵌入式的 genius-CSDN博客https://blog.csdn.net/m0_73589512?spm1011.2682.3001.5343感悟&#xff1a; 今天我认为最重…

Flutter基础(前端教程⑧-数据模型)

这个示例展示了如何创建数据模型、解析 JSON 数据&#xff0c;以及在 UI 中使用这些数据&#xff1a;import package:flutter/material.dart; import dart:convert;void main() {// 示例&#xff1a;手动创建User对象final user User(id: 1,name: 张三,age: 25,email: zhangsa…

SSRF10 各种限制绕过之30x跳转绕过协议限制

ssrf漏洞在厂商的处理下可能进行一些特殊处理导致我们无法直接利用漏洞 有以下四种&#xff1a; 1.ip地址限制绕过 2.域名限制绕过 3.30x跳转绕过域名限制 4.DNS rebinding绕过内网ip限制 本章我们讲30x跳转绕过域名限制 30x跳转绕过域名限制 之前我们使用ssrf漏洞时可以…

DNS解析过程和nmap端口扫描

目录 DNS解析流程&#xff1a; nmap端口扫描 指定扫描方式 TCP全连接扫描 -sT SYN半连接扫描 -sS -sT和 -sS的区别 Linux提权 利用好谷歌语法查找敏感信息 如果自己搭建了网站文件要放在phpstudy_pro\WWW下。 如果想要使用域名访问网站&#xff0c;需要在phpstudy_pro…

【基于开源大模型(如deepseek)开发应用及其发展趋势的一点思考】

1. 开源大模型技术发展现状1.1 DeepSeek等主流开源大模型的技术特性分析 DeepSeek作为当前最具代表性的开源大模型之一&#xff0c;其技术架构具有多项创新特性。该模型采用混合专家架构(MoE)&#xff0c;通过将视觉编码分离为"理解"和"生成"两条路径&…

java8 ConcurrentHashMap 桶级别锁实现机制

Java 8 ConcurrentHashMap 桶级别锁实现机制 Java 8 中的 ConcurrentHashMap 抛弃了分段锁设计&#xff0c;采用了更细粒度的桶级别锁&#xff08;bucket-level locking&#xff09;实现&#xff0c;这是其并发性能提升的关键。下面详细解析其实现原理&#xff1a; 1. 基本实现…

Python正则表达式实战指南

一 正则表达式库正则表达式是文本处理中不可或缺的强大工具&#xff0c;Python通过re模块提供了完整的正则表达式支持。本文将详细介绍re模块中最常用的match()、search()和findall()函数&#xff0c;以及贪婪模式与非贪婪模式的区别&#xff0c;帮助读者掌握Python中正则表达式…

使用球体模型模拟相机成像:地面与天空的可见性判断与纹理映射

在传统相机模拟中&#xff0c;地面通常被建模为一个平面&#xff08;Plane&#xff09;&#xff0c;这在低空场景下是合理的。但在更大视场范围或远距观察时&#xff0c;地球的曲率不可忽视。因此&#xff0c;我们需要将地面模型从平面升级为球体&#xff0c;并基于球面与光线的…

Agent自动化与代码智能

核心问题&#xff1a; 现在很多团队做AI系统有个大毛病&#xff1a;只顾追求“高大上”的新技术&#xff08;尤其是AI Agent&#xff09;&#xff0c;不管实际业务需不需要。 结果系统搞得又贵、又复杂、还容易出错。大家被“Agent”这个概念搞晕了&#xff1a;到底啥时候用简单…

SQL141 试卷完成数同比2020年的增长率及排名变化

SQL141 试卷完成数同比2020年的增长率及排名变化 withtemp as (selectexam_id,tag,date(submit_time) as submit_timefromexamination_infoleft join exam_record using (exam_id)wheresubmit_time is not null),2021_temp as (selecttag,count(*) as exam_cnt_21,rank() over…