当前位置: 首页 > news >正文

axios介绍和使用

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

相关文章:

axios介绍和使用

1. Axios是什么 Axios框架全称&#xff08;ajax – I/O – system&#xff09; Axios是一个基于Promise的JavaScript HTTP客户端&#xff0c;用于浏览器和Node.js环境。它可以发送HTTP请求并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换JSON数据等功能。 Axios提…...

redis雪崩问题

Redis雪崩问题是指在Redis缓存系统中&#xff0c;由于某些原因导致大量缓存数据同时失效或过期&#xff0c;导致所有请求都直接访问数据库&#xff0c;从而引发数据库性能问题甚至宕机的情况。 造成Redis雪崩问题的原因主要有以下几个&#xff1a; 缓存数据同时失效&#xff…...

[SUCTF 2019]EasySQL1 题目分析与详解

一、题目介绍 1、题目来源&#xff1a; BUUCTF网站&#xff0c;网址&#xff1a;https://buuoj.cn/challenges 2、题目描述&#xff1a; 通过以上信息&#xff0c;拿到flag。 二、解题思路 首先打开靶机&#xff0c;尝试输入1查看回显&#xff0c;回显如图所示&#xff1a;…...

TestNG与ExtentReport单元测试导出报告文档

TestNG与ExtentReport集成 目录 1 通过实现ITestListener的方法添加Reporter log 1.1 MyTestListener设置 1.2 输出结果 2 TestNG与ExtentReporter集成 2.1 项目结构 2.2 MyExtentReportListener设置 2.3 单多Suite、Test组合测试 2.3.1 单Suite单Test 2.3…...

【JavaEE】_form表单构造HTTP请求

目录 1. form表单的格式 1.1 form表单的常用属性 1.2 form表单的常用搭配标签&#xff1a;input 2. form表单构造GET请求实例 3. form表单构造POST请求实例 4. form表单构造法的缺陷 对于客户端浏览器&#xff0c;以下操作即构造了HTTP请求&#xff1a; 1. 直接在浏览器…...

Mysql中INFORMATION_SCHEMA虚拟库使用

虚拟库字段讲解 #查看INFORMATION_SCHEMA的表信息 DESC information_schema.tables; 重要列&#xff1a; TABLE_SCHEMA #表所在的库 TABLE_NAME #表名 ENGINE #表的存储引擎 TABLE_ROWS #表的行数 DATA_LENGTH #表数据行占用的字节数 AVG_ROW_LENGTH #平均行长度 INDEX_LENGTH…...

【《高性能 MySQL》摘录】第 2 章 MySQL 基准测试

文章目录 2.1 为什么需要基准测试2.2 基准测试的策略2.2.1 测试何种指标 2.3 基准测试方法2.3.1 设计和规划基准测试2.3.2 基准测试应该运行多长时间2.3.3 获取系统性能和状态2.3.4 获得准确的测试结果2.3.5 运行基准测试并分析结果2.3.6 绘图的重要性 2.4 基准测试工具…...

常用的Web应用程序的自动测试工具有哪些

在Web应用程序的自动化测试领域&#xff0c;有许多流行的工具可供选择。以下是一些常用的Web自动化测试工具&#xff1a; 1. Selenium - Selenium是最流行的开源Web应用程序自动化测试套件之一。 - 它支持多种编程语言&#xff0c;如Java、C#、Python、Ruby等。 …...

人工智能与开源机器学习框架

链接&#xff1a;华为机考原题 TensorFlow是一个开源的机器学习框架&#xff0c;由Google开发和维护。它提供了一个针对神经网络和深度学习的强大工具集&#xff0c;能够帮助开发人员构建和训练各种机器学习模型。 TensorFlow的基本概念包括&#xff1a; 张量&#xff08;Ten…...

高通XBL阶段读取分区

【需求】&#xff1a; 在某些场景下&#xff0c;需要在XBL阶段读取分区数据&#xff0c;需要验证xbl阶段方案 这里主要以裸分区为例&#xff0c;比如oem分区。 1、创建一个1MB大小的oem.img&#xff0c;写入内容“test oem partition” 创建方式&#xff1a; dd if/dev/null …...

[极客大挑战2019]upload

该题考点&#xff1a;后缀黑名单文件内容过滤php木马的几种书写方法 phtml可以解析php代码&#xff1b;<script language"php">eval($_POST[cmd]);</script> 犯蠢的点儿&#xff1a;利用html、php空格和php.不解析<script language"php"&…...

[FastDDS] 基于eProsima FastDDS的移动机器人数据中间件

[FastDDS] 基于eProsima FastDDS的移动机器人数据中间件 注明&#xff1a;无 本栏目主要讲述&#xff0c;基于eProsima FastDDS的移动机器人数据中间件的实现、使用、性能测试。 What is [ FastDDS ]: eProsima Fast DDS是DDS&#xff08;数据分发服务&#xff09;规范的C实现…...

实现外网手机或者电脑随时随地远程访问家里的电脑主机(linux为例)

文章目录 一、背景概要二、安装配置花生壳软件(linux版本)三、手机端(外网)验证连接四、安装ubuntu20server版系统遇到的问题记录 一、背景概要 由于经常在遇到某些问题的时候&#xff0c;针对某一个场景的理解&#xff0c;需要借助于自己的电脑去编译(aosp/linux/qemu)代码查…...

spring boot集成redis

引入依赖 <!-- redis依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- 连接池依赖 --><dependency><groupId>org.ap…...

Docker的常用命令

Docker的常用命令 Docker是一个开源的应用容器引擎&#xff0c;它使得开发者能够打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间没有任何接口&#xff…...

JSON简介与基本使用

JSON简介与基本使用 引言 在现今的互联网开发中&#xff0c;数据交换格式的选择至关重要。其中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;作为一种轻量级的数据交换格式&#xff0c;因其简洁、易读和易写的特性而备受青睐。本文将简要介绍JSON的基…...

好物周刊#40:多功能文件管理器

https://github.com/cunyu1943/JavaPark https://yuque.com/cunyu1943 村雨遥的好物周刊&#xff0c;记录每周看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;每周五发布。 一、项目 1. 中国节假日补班日历 中国节假日、调休、补班日历&#xff0c;ICS 格式…...

【洛谷 P8780】[蓝桥杯 2022 省 B] 刷题统计 题解(贪心算法+模拟+四则运算)

[蓝桥杯 2022 省 B] 刷题统计 题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a a a 道题目&#xff0c;周六和周日每天做 b b b 道题目。请你帮小明计算&#xff0c;按照计划他将在第几天实现做题数大于等于 n n n 题? 输入格式 输入一…...

【蓝桥杯入门记录】静态数码管例程

目录 一、补充 &#xff08;code&#xff09; 二、例程 &#xff08;1&#xff09;例程1&#xff1a;数码管显示某一位&#xff08;某一杠&#xff09;。以点亮8段数码管最上面的横杠为例。 &#xff08;2&#xff09;例程2&#xff1a;数码管的8个段依次点亮&#xff08;其他…...

6.openEuler系统服务的配置和管理(二)

openEuler OECA认证辅导,标红的文字为学习重点和考点。 如果需要做实验,建议安装麒麟信安、银河麒麟、统信等具有图形化的操作系统,其安装与openeuler基本一致。 3.任务管理 任务的概念和相关术语: 当你在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...