【Vue2】 axios库

news2024/11/13 10:32:51

网络请求库-axios库

      • 认识Axios库
          • 为什么选择Axios库
          • 安装Axios
      • axios发送请求
          • 常见的配置选项
          • 简单请求
          • 可以给Axios设置公共的基础配置
          • 发送多个请求
      • axios创建实例
          • 为什么要创建axios的实例
      • axios的拦截器
          • 请求拦截器
          • 响应拦截器
      • axios请求封装

认识Axios库

为什么选择Axios库
  • 在游览器中发送XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 支持多种请求
    在这里插入图片描述

安装Axios
npm i axios

axios发送请求

常见的配置选项

在这里插入图片描述

简单请求

在这里插入图片描述

  • get或者post请求

  • post的参数第二个是data
    在这里插入图片描述

  • 也可以这样写
    在这里插入图片描述

可以给Axios设置公共的基础配置

在这里插入图片描述

发送多个请求

在这里插入图片描述

  • 打印的内容
    在这里插入图片描述

axios创建实例

为什么要创建axios的实例
  • axios模块中导入对象时,使用的实例是默认的实例
  • 给该实例一些默认配置的时候,这些配置就被固定下来
  • 如果后续开发的项目某些配置想要不一样,比如某些请求需要使用特定的基地址等等,
  • 这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息
// 可以创建多个实例,针对不同的地址
// 创建其他实例发送网络请求
const instancel = axios.create({
    baseURL: "",
})
instancel.post('', {
    name: "乞力马扎罗"
}).then(res => {
    console.log(res)
})

// 创建其他实例发送网络请求
const instancel2 = axios.create({
    baseURL: "",
    timeout: 6000,
    headers: ({})
})

axios的拦截器

  • 对实例配置拦截器
请求拦截器
  • 开始loading的动画
  • 对原来的配置进行一些修改
  • header
  • 认证登录
  • 请求参数的修改
axios.interceptors.request.use((config) => {
    //请求成功的拦截,返回配置信息,如果修改完,记得把config返回回去
    return config
}, (err) => {
    //请求失败的拦截
    return err
})
响应拦截器
axios.interceptors.response.use((res)=>{
    // 响应成功的拦截
    return res.data
},(err)=>{
    console.log(响应失败)
})

axios请求封装

  • 这个我有独自封装二次封装,可以搜索一下哦!

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

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

相关文章

git学习笔记 | 版本管理 - 分支管理

文章目录 git学习笔记Git是什么仓库常见的命令commit 备注规范在文件下设置git忽略文件 .gitignore 版本管理git log | git reflog 查看提交日志/历史版本版本穿梭 git resetgit reset HEAD <file> git checkout -- fileName 丢弃工作区的修改git revertGit恢复之前版本的…

海格里斯HEGERLS高密度料箱式四向穿梭车存储系统有哪些显著优势?

近些年仓储货架向着自动化、智能化发展&#xff0c;因此市面上出现很多不同类型的智能自动化仓储货架。其中&#xff0c;最受企业青睐的便是四向穿梭车货架。四向穿梭车货架根据其载重不同可分为托盘式和料箱式两大类。这两种不同类型的四向穿梭车货架在结构形式和控制方式上基…

Ubuntu20.04下安装google输入法

Ubuntu20.04下安装google输入法 1、添加中文语言支持 打开 系统设置——区域和语言——管理已安装的语言——在“语言”tab下——点击“添加或删除语言” 弹出“已安装语言”窗口&#xff0c;勾选中文&#xff08;简体&#xff09;&#xff0c;点击应用 回到“语言支持”窗…

日本橙皮书数据库—《医疗用医药品质量情报集》

日本橙皮书是一份关于医疗用医药品质量情报的汇总报告&#xff0c;由日本厚生劳动省发布。它主要涵盖了药品的品质再评价信息&#xff0c;特别是针对特定历史阶段的产品&#xff0c;笔者总结信息如下&#xff1a; ①日本橙皮书数据库包含了一系列药品的详细信息&#xff0c;如…

一句话画出动漫效果

链接&#xff1a; AI Comic Factory - a Hugging Face Space by jbilcke-hfDiscover amazing ML apps made by the communityhttps://huggingface.co/spaces/jbilcke-hf/ai-comic-factory 选择类型&#xff1a; Japanese 输入提示词&#xff1a; beauty and school love st…

视频云存储/安防监控/视频AI智能分析网关V3:消防器材缺失检测功能详解

在我们的日常生活中&#xff0c;消防器材是必不可少的&#xff0c;无论是在学校、园区还是工厂里&#xff0c;都需要摆放消防器材&#xff0c;做好防范措施&#xff0c;降低安全隐患。但有时也需防备消防器材被人为挪动甚至破坏&#xff0c;在危急时刻无法发挥作用。TSINGSEE青…

【kubernetes】Argo Rollouts -- k8s下的自动化蓝绿部署

蓝绿(Blue-Green)部署简介 在现代软件开发和交付中,确保应用程序的平稳更新和发布对于用户体验和业务连续性至关重要。蓝绿部署是一种备受推崇的部署策略,它允许开发团队在不影响用户的情况下,将新版本的应用程序引入生产环境。 蓝绿部署的核心思想在于维护两个独立的环…

lv3 嵌入式开发-1linux介绍及环境配置

目录 1 UNIX、Linux和GNU简介 2 环境介绍 3 VMwareTools配置 4 vim配置&#xff1a; 1 UNIX、Linux和GNU简介 什么是UNIX? unix是一个强大的多用户、多任务操作系统&#xff0c;支持多种处理器架构 中文名 尤尼斯 外文名 UNIX 本质 操作系统 类型 分时操作系统 开…

数据结构入门 — 栈

本文属于数据结构专栏文章&#xff0c;适合数据结构入门者学习&#xff0c;涵盖数据结构基础的知识和内容体系&#xff0c;文章在介绍数据结构时会配合上动图演示&#xff0c;方便初学者在学习数据结构时理解和学习&#xff0c;了解数据结构系列专栏点击下方链接。 博客主页&am…

一百七十、Linux——Crontab定时任务调度Kettle脚本

一、目的 由于用海豚调度器调度从Kafka到HDFS的kettle任务时发现有点问题&#xff0c;如果不设置定时调度&#xff0c;这个kettle任务会一直跑&#xff0c;而如果设置定时调度&#xff0c;隔天后就会生成多个任务&#xff0c;而且每个任务都在跑&#xff0c;不会停下&#xff…

stable diffusion实践操作-提示词

本文专门开一节写提示词相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 正文 提示词是SD中非常重要&#xff0c;你生成的图片质量&#xff0c;基本就取决于提示词的好坏&#xff0c;提示词分为正向提示词和反向提示词。 模板…

激光切割机自动调焦技术详解加图解

激光切割机在切割不同材料的过程中&#xff0c;激光束的焦点必须根据要求位于材料的不同位置。 因此&#xff0c;在切割不同材料的物料时&#xff0c;需要调整激光切割机的焦点位置。在以前的生产激光切割机中&#xff0c;普遍采用手动调焦的方法进行调焦。现在&#xff0c;许多…

【Docker】用Dockerfile制作个人的镜像文件

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

stable diffusion实践操作-常见lora模型介绍

本文专门开一节写Lora相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 模型分两种&#xff0c;一种是sd大模型&#xff0c;一种是类似Lora的小模型 国内的是&#xff1a;https://www.liblibai.com 国外的是&#xff1a;https:/…

企业数字化建设-采购平台规划方案PPT(附数字化建设方案300份)

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除&#xff0c;更多浏览公众号&#xff1a;智慧方案文库 46页《智慧书店数字化转型解决方案》.pdf8页德勒数字化智能制造解决方案.pdf24页数字化智能化车间规模与建设.pdf数字化校…

【C++】C++11新特性(下)

上篇文章&#xff08;C11的新特性&#xff08;上&#xff09;&#xff09;我们讲述了C11中的部分重要特性。本篇接着上篇文章进行讲解。本篇文章主要进行讲解&#xff1a;完美转发、新类的功能、可变参数模板、lambda 表达式、包装器。希望本篇文章会对你有所帮助。 文章目录 一…

【整数列表求三的倍数】

问题描述: 给定一个从1到n的整数列表&#xff0c;从第一个数字开始计数&#xff0c;遇到3的倍数时&#xff0c;将该数从列表中删除&#xff0c;直至列表末尾。 在剩下的数字中&#xff0c;从第一个数字开始&#xff0c;继续之前的计数值&#xff0c;同样遇到3的倍数时&#xff…

插值法修正排斥能

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由5张二值化的图片组成&#xff0c;让A中有3个点&#xff0c;B全为0&#xff0c;排列组合A&#xff0c;统计迭代次数并排序。 其中的7组数据 差值结构 迭代次数 构造平均列 L E 0 1…

Jmeter的自动化测试实施方案

前言&#xff1a; Jmeter是目前最流行的一种测试工具&#xff0c;基于此工具我们搭建了一整套的自动化方案&#xff0c;包括了脚本添加配置、本地配置和运行、服务器配置等内容&#xff0c;完成了自动化测试闭环&#xff0c;通过这种快捷简便高效的方式&#xff0c;希望可以解…