axios介绍和使用

news/发布时间2024/5/15 5:39:38

1. Axios是什么

Axios框架全称（ajax – I/O – system）

Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境。它可以发送HTTP请求并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换JSON数据等功能。

Axios提供了一个简单而直观的API，使得在前端应用程序中进行HTTP通信变得更加容易。它可以与现代前端框架（如React、Vue.js和Angular）以及后端服务器（如Node.js）配合使用。

使用Axios可以发送各种类型的HTTP请求，如GET、POST、PUT、DELETE等。可以设置请求头、请求参数、超时时间，并且还可以通过拦截器在请求发送之前或响应返回之后对请求和响应进行处理。

一句话概括：Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境，简化了前端应用程序中与服务器进行HTTP通信的过程。

Promise不了解的可以看这个：Promise介绍和使用

2. Axios安装和使用

2.1. 使用npm安装

 npm install axios

2.2. Axios使用

在组件中引入axios并使用

<template><div class="hello"><button @click="get">GET请求</button></div>
</template><script>import axios from "axios"export default {methods: {get(){axios.get('/user').then(res=>{console.log(res.data);})}}
}
</script>

3. Axios请求方式

3.1. axios中常用请求方法

get：获取数据

post：向指定资源提交数据（例如表单提交或文件上传）

put：更新数据（所有数据推送到服务端）

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

3.1.1. get方法

3.1.1.1. 方式1

不带参数

axios.get("/user").then(res => {console.log(res);}).catch(err => {console.log(err);});

带参数

axios.get("/user", {params: {id: 12}}).then(res => {console.log(res);}).catch(err => {console.log(err);});
3.1.1.2. 方式2

不带参数

axios({method:'get',url:'/user'
}).then(res=>{console.log(res)
})

带参数

axios({method: "get",url: "/user",params:{id:12}
}).then(res => {console.log(res);
});

GET请求参数会在URL中展示出来，效果如下

URL：http://localhost:8080/user?id=1

3.1.2. post方法

常用的两种post请求类型

  1. application/json 一般是用于 ajax 异步请求
  2. form-data 表单提交，图片上传、文件上传
3.1.2.1. application/json

使用json格式请求，平时最常用

请求头中Content-Type: application/json;charset=UTF-8

方式1

let data = {id: 1
};
axios.post("/user", data).then(res=>{console.log(res, 'post')
});

方式2

let data = {id: 1
};
axios({method:'post',url:'/user',data:data
}).then(res=>{console.log(res)
})
3.1.2.2. form-data

请求头中Content-Type: multipart/form-data

let data = {id: 1
};
let formData = new FormData();
for(let key in data){formData.append(key,data[key])
}
console.log(formData)
axios.post('/user',formData).then(res=>{console.log(res,'formData')
})

3.1.3. put方法

3.1.3.1. 方式1
let data = {id: 1
};
axios.put("/user", data).then(res=>{console.log(res, 'put')
});
3.1.3.2. 方式2
let data = {id: 1
};
axios({method:'put',url:'/user',data:data
}).then(res=>{console.log(res)
})

3.1.4. patch方法

3.1.4.1. 方式1
let data = {id: 1
};
axios.patch("/user", data).then(res=>{console.log(res, 'patch')
});
3.1.4.2. 方式2
let data = {id: 1
};
axios({method:'patch',url:'/user',data:data
}).then(res=>{console.log(res)
})

3.1.5. delete方法

3.1.5.1. 方式1：params

params方式会将请求参数拼接在url上面

http://localhost:8080/user?id=1

axios.delete("/user", {params: {id: 1}}).then(res => {console.log(res, "delete");});
let params = {id: 1
};
axios({method:'delete',url:'/user',params:params
}).then(res=>{console.log(res)
})
3.1.5.2. 方式二：data

data请求参数是直接放置在请求体中的，url上不会展示

axios.delete("/user", {data: {id: 1}}).then(res => {console.log(res, "delete");});
let data = {id: 1
};
axios({method:'delete',url:'/user',data:data
}).then(res=>{console.log(res)
})

3.1.6. 并发请求

并发请求就是同时进行多个请求，并统一处理返回值

使用axios.all进行并发请求，使用axios.spread对返回的结果分别进行处理

axios.all([axios.get("/user"), axios.get("/product")]).then(axios.spread((userRes, productRes) => {console.log(userRes, productRes);})
);

4. Axios实例

4.1. Axios实例是什么

Axios实例是Axios库中的一个对象，它允许创建具有自定义配置的独立实例，以便在不同的请求中使用不同的设置。

使用Axios实例可以设置默认的请求配置、自定义拦截器、设置基本URL等。这对于在项目中的不同部分使用不同的配置非常有用，或者当需要同时与多个服务器进行通信时。

比如有两个接口请求，一个请求超时时间是10s, 另一个是30s，这时就可以创建两个实例，配置不同的超时时间

4.2. 创建Axios实例

// 实例1
let instance = axios.create({baseURL:'http://loacalhost:8080',timeout:1000
})
instance.get('/user').then(res=>{console.log(res)
})
//实例2
let instance2 = axios.create({baseURL: "http://loacalhost:8081",timeout: 3000
});
instance2.get("/product").then(res => {console.log(res);
});

axios实例常用配置：

  1. baseURL 请求的域名，基本地址，类型：String
  2. timeout 请求超时时长，单位ms，类型：Number
  3. url 请求路径，类型：String
  4. method 请求方法，类型：String
  5. headers 设置请求头，类型：Object
  6. params 请求参数，将参数拼接在URL上，类型：Object
  7. data 请求参数，将参数放到请求体中，类型：Object

示例如下：

// 创建一个Axios实例
const instance = axios.create({baseURL: 'https://api.example.com',timeout: 5000,url: '/user',method: 'post',headers: {'Authorization': 'Bearer your_token'},params: {id:1}
});

4.3. Axios配置

4.3.1. axios全局配置

axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 2000

4.3.2. axios实例配置

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

4.3.3. axios请求配置

instance.get('/user.json',{timeout:5000
})

配置的优先级为：请求配置 > 实例配置 > 全局配置

5. 拦截器

5.1. 拦截器是什么

Axios中的拦截器是一种机制，允许你在发送请求之前和接收响应之后对请求和响应进行拦截和处理。拦截器可以用于添加公共的请求头、请求参数处理、错误处理等。

Axios提供了两种类型的拦截器：请求拦截器和响应拦截器。

5.2. 请求拦截器

请求拦截器允许你在发送请求之前对请求进行修改或添加额外的配置。你可以使用axios.interceptors.request.use()方法来添加请求拦截器。下面是一个示例：

axios.interceptors.request.use(config {// 在发送请求之前做些什么config.headers.Authorization = 'Bearer your_token';return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});

在上面的示例中，我们使用axios.interceptors.request.use()方法添加了一个请求拦截器。拦截器函数接收一个config对象作为参数，你可以在这里修改请求的配置，比如添加请求头。

5.3. 响应拦截器

响应拦截器允许你在接收到响应之后对响应进行拦截和处理。你可以使用axios.interceptors.response.use()方法来添加响应拦截器。下面是一个示例：

axios.interceptors.response.use(response {// 对响应数据做些什么console.log(response.data);return response;
}, function (error) {// 对响应错误做些什么return Promise.reject(error);
});

在上面的示例中，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器。拦截器函数接收一个response对象作为参数，你可以在这里对响应数据进行处理，比如打印响应数据。

5.4. 取消拦截器

let inter = axios.interceptors.request.use(config=>{config.header={auth:true}return config
})
axios.interceptors.request.eject(inter)

6. 错误处理

不管请求拦截器还是响应拦截器，只要发生错误都会执行catch方法

//  请求拦截器
axios.interceptors.request.use(config => {// 在发送请求前做些什么return config;},err => {// 在请求错误的时候的逻辑处理return Promise.reject(err);}
);
// 响应拦截器
axios.interceptors.response.use(res => {// 在请求成功后的数据处理return res;},err => {// 在响应错误的时候的逻辑处理return Promise.reject(err);}
); 
axios.get("/user").then(res => {console.log(res);}).catch(err => {// 这个可以捕获请求/响应拦截中的错误，进行相关处理console.log(res);});

7. 取消请求

这个比较少用

使用的场景：在查询数据的时候，长时间仍未获取数据，这个时候需要取消请求

let source = axios.CancelToken.source();
axios.get("/user", {cancelToken: source.token}).then(res => {console.log(res);}).catch(err=>{console.log(err)})
// 取消请求(参数msg)
source.cancel('自定的的字符串可选')

8. 实际项目中的一个请求类（request.js）

import axios from 'axios'const request = axios.create({baseURL: '/api', timeout: 5000
})
let token = '';
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
//添加一个请求拦截器
axios.interceptors.request.use(function (config) {let user = JSON.parse(window.sessionStorage.getItem('access-user'));if (user) {token = user.token;}config.headers.common['token'] = token;//console.dir(config);return config;
}, function (error) {// Do something with request errorconsole.info("error: ");console.info(error);return Promise.reject(error);
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)// 以request暴露出去
export default request

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

如若内容造成侵权/违法违规/事实不符，请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com，一经查实，立即删除！

相关文章

【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Thu, 18 Jan 2024 Totally 43 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers CognitiveDog: Large Multimodal Model Based System to Translate Vision and Language into Action of Quadruped Robot Aut…
阅读更多...
探究二维码技术：连接现实与数字世界的桥梁

探究二维码技术：连接现实与数字世界的桥梁

title: 探究二维码技术&#xff1a;连接现实与数字世界的桥梁 date: 2024/2/19 13:15:36 updated: 2024/2/19 13:15:36 tags: 二维码技术数据编码纠错算法图像处理商业应用安全验证实时交互 引言&#xff1a; 二维码已经成为现代社会中广泛应用的一种技术工具。它不仅在商业领…
阅读更多...
Unity—JSON

Unity—JSON

每日一句&#xff1a;手简素中&#xff0c;感生活恬淡&#xff0c;心有所期&#xff0c;忙而不茫 目录 服务器 常见的服务器语言 Unity的开发语言 JSON 功能&#xff1a; JSON最简单的格式 JSON工具 支持的数据结构&#xff08;C#对于JSON&#xff09; 字符含义 JSON…
阅读更多...
2023 年，我患上了 AI 焦虑症！

2023 年，我患上了 AI 焦虑症！

【作者有话说】2023 年对我来说是神奇的一年&#xff0c;我意外地从一个程序员变成了一个 AI 资讯届的“网红”&#xff0c;到年底时我在 X 平台的阅读量超过 1 亿&#xff0c;微博上的阅读量则超过 10 亿&#xff0c;很多人通过我的微博或者 X 了解最新的 AI 资讯、教程和 Pro…
阅读更多...
红队打靶练习:HACK ME PLEASE: 1

红队打靶练习:HACK ME PLEASE: 1

信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.61.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.61.2 00:50:56:f0:df:20 …
阅读更多...
docker （四）-docker网络

docker （四）-docker网络

默认网络 docker会自动创建三个网络&#xff0c;bridge,host,none bridge桥接网络 如果不指定&#xff0c;新创建的容器默认将连接到bridge网络。 默认情况下&#xff0c;使用bridge网络&#xff0c;宿主机可以ping通容器ip&#xff0c;容器中也能ping通宿主机。 容器之间只…
阅读更多...
opencv计算机视觉

opencv计算机视觉

树莓派主机的无键盘解决 进入控制面板&#xff0c;更改适配器设置&#xff0c;WIFI属性&#xff0c;勾选 1.将网线两头分别接入树莓派和笔记本的网线接口 2.在无线连接属性那里勾选允许其他用户连接 3.运行cmd使用arp -a查看树莓派ip地址&#xff0c;或者使用ipscanner查看 cmd…
阅读更多...
前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

前言 在项目开发中&#xff0c;我们经常会使用一些工具函数&#xff0c;也经常会用到例如loadsh等工具库&#xff0c;但是这些工具库的体积往往比较大&#xff0c;如果项目本身已经引入了这些工具库&#xff0c;那么我们就没有必要再引入一次&#xff0c;所以我们需要自己封装…
阅读更多...
鸿蒙系统进一步学习（一）：学习资料总结，少走弯路

鸿蒙系统进一步学习（一）：学习资料总结，少走弯路

随着鸿蒙Next的计划越来越近&#xff0c;笔者之前的鸿蒙系统扫盲系列中&#xff0c;有很多朋友给我留言&#xff0c;不同的角度的问了一些问题&#xff0c;我明显感觉到一点&#xff0c;那就是许多人参与鸿蒙开发&#xff0c;但是又不知道从哪里下手&#xff0c;因为资料太多&a…
阅读更多...
Vi 和 Vim 编辑器

Vi 和 Vim 编辑器

Vi 和 Vim 编辑器 vi 和 vim 的基本介绍 Linux 系统会内置 vi 文本编辑器 Vim 具有程序编辑的能力&#xff0c;可以看做是 Vi 的增强版本&#xff0c;可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计。 代码补完、编译及错误跳转等方便编程的功能特别丰富&…
阅读更多...
【超级干货】ArcGIS_空间连接_工具详解

【超级干货】ArcGIS_空间连接_工具详解

帮助里对空间连接的解释&#xff1a; 根据空间关系将一个要素的属性连接到另一个要素。 目标要素和来自连接要素的被连接属性写入到输出要素类。 如上图所示&#xff0c;关键在于空间关系&#xff0c;只有当两个要素存在空间关系的时候&#xff0c;空间连接才有用武之地。 一…
阅读更多...
MySQL 基础知识（四）之表操作

MySQL 基础知识（四）之表操作

目录 1 约束 2 查看已有表 3 创建表 4 查看表结构 5 修改表 6 删除表 1 约束 主键约束 primary key&#xff1a;唯一&#xff0c;标识表中的一行数据&#xff0c;此列的值不可重复&#xff0c;且不能为 NULL&#xff0c;此外&#xff0c;可以多个列组成主键唯一约束 uniq…
阅读更多...
Linix与Windows上使用nc命令测试某一个服务器端口网络是否正常可访问详细安装及测试步骤

Linix与Windows上使用nc命令测试某一个服务器端口网络是否正常可访问详细安装及测试步骤

一、windows 1、下载nc安装包 https://nszyf.lanzoum.com/ihtqS0v0lwwh 2、下载后解压放置在自己电脑合适的位置&#xff0c;并且配置到环境变量中 3、配置成功环境变量&#xff0c;winr打开运行&#xff0c;输入cmd&#xff0c;回车&#xff0c;打开一个终端测试 测试成功…
阅读更多...
腾讯云4核8G12M服务器4c或4h什么意思？8g是什么？

腾讯云4核8G12M服务器4c或4h什么意思？8g是什么？

4核8G是云服务器的参数&#xff0c;代表云服务器的硬件配置和网络带宽&#xff0c;4核代表CPU、8G是指内存、12M代表带宽值为12Mbps&#xff0c;腾讯云百科txybk.com以腾讯云轻量应用服务器4核8G12M带宽配置为例&#xff0c;来详细介绍下服务器参数&#xff1a; 4c8g是什么意思…
阅读更多...
ARM：AI 的翅膀，还能飞多久？

ARM：AI 的翅膀，还能飞多久？

ARM&#xff08;ARM.O&#xff09;于北京时间 2024 年 2 月 8 日上午的美股盘后发布了 2024 年第三财年报告&#xff08;截止 2023 年 12 月&#xff09;&#xff0c;要点如下&#xff1a; 1、整体业绩&#xff1a;收入再创新高。ARM 在 2024 财年第三季度&#xff08;即 23Q4…
阅读更多...
Window系统GPT-SoVITS配置安装

Window系统GPT-SoVITS配置安装

GPT-SoVITS配置安装 GPT-SoVITS配置Python下载以及安装源文件安装依赖 运行整理在安装配置环境时遇到的报错总结 GPT-SoVITS配置 作者链接 Python下载以及安装 版本这里根据教程的版本走即可&#xff0c;这里不会安装python或者不会配置环境的参考我之前的文章 Python 3.9,…
阅读更多...
C语言之内存函数

C语言之内存函数

内存函数&#xff1a;通常指的是在编程中用于处理内存操作的函数&#xff0c;这些函数可以用来分配、释放、复制、比较等内存相关的操作。在C语言中&#xff0c;这些内存函数 memcpy()、memmove()、memset()、memcmp() 都需要引用头文件 <string.h>。 1.memcpy函数 mem…
阅读更多...
【电路笔记】-感抗

【电路笔记】-感抗

感抗 文章目录 感抗1、概述2、感抗示例13、通过 LR 串联电路的交流电源4、感抗示例25、交流电感器的功率三角形线圈的感抗取决于所施加电压的频率，因为电抗与频率成正比。 1、概述 感抗是电感线圈的一种特性，它抵抗通过它的交流电 (AC) 的变化，类似于电阻中对抗直流电 (DC)…
阅读更多...
OpenAI：Sora视频生成模型技术报告（中文）

OpenAI：Sora视频生成模型技术报告（中文）

概述 视频生成模型作为世界模拟器 我们探索视频数据生成模型的大规模训练。具体来说&#xff0c;我们在可变持续时间、分辨率和宽高比的视频和图像上联合训练文本条件扩散模型。我们利用transformer架构&#xff0c;在视频和图像潜在代码的时空补丁上运行。我们最大的模型Sor…
阅读更多...
单片机学习笔记---DS18B20温度读取

单片机学习笔记---DS18B20温度读取

目录 OneWire.c 模拟初始化的时序 模拟发送一位的时序 模拟接收一位的时序 模拟发送一个字节的时序 模拟接收一个字节的时序 OneWire.h DS18B20.c DS18B20数据帧 模拟温度变换的数据帧 模拟温度读取的数据帧 DS18B20.h main.c 上一篇讲了DS18B20温度传感器的工作原…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 尧图建网站 广利置业