前端面试题(三):axios有哪些常用的方法

news2025/4/8 3:59:02

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一些常用的方法来处理不同类型的请求。以下是 Axios 中常用的一些方法:

1. axios.get()

  • 用于发送 GET 请求,从服务器获取数据。

    axios.get('/api/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    

2. axios.post()

  • 用于发送 POST 请求,向服务器发送数据。

    axios.post('/api/data', { name: 'John', age: 30 })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    

3. axios.put()

  • 用于发送 PUT 请求,更新指定资源的完整数据。

    axios.put('/api/data/1', { name: 'John', age: 31 })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    

4. axios.patch()

  • 用于发送 PATCH 请求,部分更新指定资源的数据。

    axios.patch('/api/data/1', { age: 32 })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    

5. axios.delete()

  • 用于发送 DELETE 请求,删除指定资源。

    axios.delete('/api/data/1')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    

6. axios.all()

  • 用于发送多个并发请求,返回一个 Promise,并且可以在所有请求都完成后执行回调。

    axios.all([
      axios.get('/api/data1'),
      axios.get('/api/data2')
    ])
    .then(axios.spread((response1, response2) => {
      console.log(response1.data, response2.data);
    }))
    .catch(error => {
      console.error(error);
    });
    

7. axios.create()

  • 用于创建一个自定义配置的 Axios 实例,可以复用配置并改变默认的设置(如 baseURLheaderstimeout 等)。

    const instance = axios.create({
      baseURL: 'https://api.example.com',
      timeout: 1000,
      headers: { 'X-Custom-Header': 'foobar' }
    });
    
    instance.get('/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    

8. axios.interceptors

  • 用于拦截请求或响应。你可以使用 requestresponse 拦截器来对请求和响应进行处理(例如,设置公共请求头、处理错误等)。

    请求拦截器

    axios.interceptors.request.use(
      config => {
        // 在请求发送前做一些处理
        config.headers.Authorization = 'Bearer token';
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    

    响应拦截器

    axios.interceptors.response.use(
      response => {
        // 处理响应数据
        return response;
      },
      error => {
        // 错误处理
        return Promise.reject(error);
      }
    );
    

9. axios.getUri()

  • 用于获取请求的 URL,它不会发送请求,只是返回请求的 URL 字符串。

    const url = axios.getUri({
      url: '/api/data',
      params: {
        id: 123
      }
    });
    console.log(url); // 输出拼接好的完整 URL
    

10. axios.request()

  • axios.request() 是一个通用的方法,所有 HTTP 请求方法(如 getpostputdelete)都可以通过该方法来发送。你可以通过传入配置对象来执行请求。

    axios.request({
      url: '/api/data',
      method: 'get',
      params: {
        id: 123
      }
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
    

总结:

  • axios.get(), axios.post(), axios.put(), axios.patch(), axios.delete() 是常用的 HTTP 方法,用于不同的请求类型。
  • axios.all() 用于处理多个并发请求。
  • axios.create() 用于创建自定义配置的实例。
  • axios.request() 是一个通用方法,可以处理所有类型的请求。
  • axios.interceptors 用于处理请求和响应的拦截器。

这些方法和功能提供了很大的灵活性,可以帮助你在处理 API 请求时更好地管理和优化请求。

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

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

相关文章

在线记事本——支持Markdown

项目地址 https://github.com/Anyuersuper/CloudNotebook 百度网盘 通过网盘分享的文件:CloudNotebook-master.zip 链接: https://pan.baidu.com/s/1_Y--aBzNkKiFRIMHYmwPdA?pwdyuer 提取码: yuer 📝 云笔记 (Cloud Notebook) 云笔记是一个简洁、安全…

Day2:前端项目uniapp壁纸实战

先来做一个轮番图。 效果如下&#xff1a; common-style.css view,swiper,swiper-item{box-sizing: border-box; } index.vue <template><view class"homeLayout"><view class"banner"><swiper circular indicator-dots autoplay…

LeetCode Hot100 刷题笔记(3)—— 链表

目录 前言 1. 相交链表 2. 反转链表 3. 回文链表 4. 环形链表 5. 环形链表 II 6. 合并两个有序链表 7. 两数相加 8. 删除链表的倒数第 N 个结点 9. 两两交换链表中的节点 10. K 个一组翻转链表 11. 随机链表的复制 12. 排序链表 13. 合并 K 个升序链表 14. LRU 缓存 前言 一、…

状态机思想编程

1. LED流水灯的FPGA代码 在这个任务中&#xff0c;首先我们会使用状态机的思想来设计一个LED流水灯的控制逻辑。LED流水灯一般需要依次点亮不同的LED&#xff0c;并且循环播放。我们将其分为几个状态&#xff0c;每个状态控制一个或一组LED灯。 状态机设计 假设我们有8个LED…

第二十八章:Python可视化图表扩展-和弦图、旭日图、六边形箱图、桑基图和主题流图

一、引言 在数据可视化领域&#xff0c;除了常见的折线图、柱状图和散点图&#xff0c;还有一些高级图表类型可以帮助我们更直观地展示复杂数据关系。本文将介绍五种扩展图表&#xff1a;和弦图、旭日图、六边形箱图、桑基图和主题流图。这些图表在展示数据关系、层次结构和流量…

基于vue框架的重庆美食网站的设计与实现kt945(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,美食分类,美食菜品 开题报告内容 基于Vue框架的重庆美食网站的设计与实现开题报告 一、选题背景与意义 &#xff08;一&#xff09;选题背景 重庆&#xff0c;作为中国西南地区的璀璨明珠&#xff0c;以其独特的地理位置和丰富…

Metal学习笔记十三:阴影

在本章中&#xff0c;您将了解阴影。阴影表示表面上没有光。当另一个表面或对象使对象与光线相遮挡时&#xff0c;您会看到对象上的阴影。在项目中添加阴影可使您的场景看起来更逼真&#xff0c;并提供深度感。 阴影贴图 阴影贴图是包含场景阴影信息的纹理。当光线照射到物体…

时间梯度匹配损失 TGMLoss

目录 时间梯度匹配损失(Temporal Gradient Matching Loss, TGM Loss) 完整示例,该损失函数常用于视频预测、运动平滑等任务,通过约束预测序列的时间梯度与真实序列一致来提升时序连续性 训练测试demo代码: 时间梯度匹配损失(Temporal Gradient Matching Loss, TGM Los…

iPhone XR:一代神机,止步于此

什么样的 iPhone &#xff0c;才配称为一代神机&#xff1f; 我曾经用过iPhone 4S、iPhone 6S Plus、iPhone 8 Plus&#xff0c;iPhone SE2、iPhone XR、iPhone 13、iPhone 14 Plus、iPhone 15/Pro。 不管硬件再怎么卷&#xff0c;不管囊中是否羞涩&#xff0c;主力机基本没考…

第十四届蓝桥杯省赛真题解析(含C++详细源码)

第十四届蓝桥杯省赛 整数删除满分思路及代码solution1 &#xff08;40% 双指针暴力枚举&#xff09;solution 2&#xff08;优先队列模拟链表 AC&#xff09; 冶炼金属满分代码及思路 子串简写满分思路及代码solution 1&#xff08;60% 双指针&#xff09;solution 2&#xff0…

OpenAI即将开源!DeepSeek“逼宫”下,AI争夺战将走向何方?

OpenAI 终于要 Open 了。 北京时间 4 月 1 日凌晨&#xff0c;OpenAI 正式宣布&#xff1a;将在未来几个月内开源一款具备推理能力的语言模型&#xff0c;并开放训练权重参数。这是自 2019 年 GPT-2 部分开源以来&#xff0c;OpenAI 首次向公众开放核心模型技术。 【图片来源于…

mysql 8.0.27-docker

安装 可以略过本步 https://dev.mysql.com/downloads/https://dev.mysql.com/downloads/ 镜像查询与安装 先查询&#xff1a; docker search mysql 明显会报错 Error response from daemon: Get "https://index.docker.io/v1/search?qmysql&n25": dial tcp…

使用NVM下载Node.js管理多版本

提示&#xff1a;我解决这个bug跟别人思路可能不太一样&#xff0c;因为我是之前好用&#xff0c;换个项目就不好使了&#xff0c;倦了 文章目录 前言项目场景一项目场景二解决方案&#xff1a;下载 nvm安装 nvm重新下载所需Node 版本nvm常用命令 项目结构说明 前言 提示&…

Linux——文件(2)文件系统

我们知道&#xff0c;文件在没有被打开时是放在磁盘中的&#xff0c;通常我们未打开的文件数量要远远大于打开的文件数量&#xff0c;而且我们要想打开一个文件&#xff0c;首先需要知道文件在磁盘的位置才能打开&#xff0c;但问题是&#xff0c;面对磁盘中成百上千个文件&…

蓝桥杯 web 水果拼盘 (css3)

做题步骤&#xff1a; 看结构&#xff1a;html 、css 、f12 分析: f12 查看元素&#xff0c;你会发现水果的高度刚好和拼盘的高度一样&#xff0c;每一种水果的盘子刚好把页面填满了&#xff0c;所以咱们就只要让元素竖着排列&#xff0c;加上是竖着&#xff0c;排不下的换行…

【eNSP实验】RIP协议

RIP协议介绍 RIP&#xff08;路由信息协议&#xff09;是一种基于距离向量的内部网关协议&#xff0c;适用于小型网络。它通过跳数&#xff08;最多15跳&#xff09;衡量路径成本&#xff0c;定期与相邻路由器交换路由表。RIPv1使用广播更新且不支持子网&#xff0c;RIPv2新增…

JAVA反序列化深入学习(十三):Spring2

让我们回到Spring Spring2 在 Spring1 的触发链上有所变换&#xff1a; 替换了 spring-beans 的 ObjectFactoryDelegatingInvocationHandler使用了 spring-aop 的 JdkDynamicAopProxy &#xff0c;并完成了后续触发 TemplatesImpl 的流程 简而言之&#xff0c;换了一个chain&am…

Matlab:三维绘图

目录 1.三维曲线绘图命令&#xff1a;plot3 实例——绘制空间直线 实例——绘制三角曲线 2.三维曲线绘图命令&#xff1a;explot3 3.三维网格命令&#xff1a;mesh 实例——绘制网格面 实例——绘制山峰曲面 实例——绘制函数曲线 1.三维曲线绘图命令&#xff1a;plot3 …

学透Spring Boot — 016. 魔术师 - Spring MVC Conversion Service 类型转换

本文是我的《学透Spring Boot》专栏的第16篇文章&#xff0c;了解更多请移步我的专栏&#xff1a; Postnull的专栏《学透Spring Boot》 目录 遇到问题 日期格式的转换 实现需求 创建转换器 注册转换器 编写Controller 访问测试 存在的问题 解决问题 源码分析 总结 …

Spring Boot开发三板斧:高效构建企业级应用的核心技法

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;获得2024年博客之星荣誉证书&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;拥有高级工程师证书&#xff1b;擅长C/C、C#等开发语言&#xff0c;熟悉Java常用开发技术&#xff0c…