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

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

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

相关文章

当服务器磁盘空间报警时怎么处理？

当服务器磁盘空间报警时怎么处理？

1、df -hT 查看磁盘使用情况 [rootapplication01 ~]# df -hT 文件系统 类型 容量 已用 可用 已用% 挂载点 /dev/mapper/centos-root xfs 44G 8.3G 36G 19% / devtmpfs devtmpfs 7.8G 0 7.8G 0% /dev tmpfs …
阅读更多...
服务器防火墙的应用技术有哪些？

服务器防火墙的应用技术有哪些？

随着互联网的发展&#xff0c;网络安全问题更加严峻。服务器防火墙技术作为一种基础的网络安全技术&#xff0c;对于保障我们的网络安全至关重要。本文将介绍服务器防火墙的概念和作用&#xff0c;以及主要的服务器防火墙技术&#xff0c;包括数据包过滤、状态检测、代理服务、…
阅读更多...
【HarmonyOS应用开发】三方库（二十）

【HarmonyOS应用开发】三方库（二十）

三方库的基本使用 一、如何获取三方库 目前提供了两种途径获取开源三方库&#xff1a; 通过访问Gitee网站开源社区获取 在Gitee中&#xff0c;搜索OpenHarmony-TPC仓库&#xff0c;在tpc_resource中对三方库进行了资源汇总&#xff0c;可以供开发者参考。 通过OpenHarmony三…
阅读更多...
小程序--模板语法

小程序--模板语法

一、插值{{}}语法 1、内容绑定 <view>{{iptValue}}</view> 2、属性绑定 <switch checked"{{true}}" /> Page({data: {iptValue: 123} }) 二、简易双向数据绑定 model:value&#xff1a;支持双向数据绑定 注&#xff1a;仅input和textarea支持&a…
阅读更多...
【Algorithms 4】算法（第4版）学习笔记 09 - 3.2 二叉查找树

【Algorithms 4】算法（第4版）学习笔记 09 - 3.2 二叉查找树

文章目录 前言参考目录学习笔记1&#xff1a;二叉树与二叉搜索树定义1.1&#xff1a;二叉树定义1.2&#xff1a;二叉搜索树定义1.3&#xff1a;Java定义1.4&#xff1a;BST基本实现1.5&#xff1a;BST demo 演示1.5.1&#xff1a;节点搜索成功命中演示1.5.2&#xff1a;节点搜索…
阅读更多...
SpringBoot+WebSocket实现即时通讯（二）

SpringBoot+WebSocket实现即时通讯（二）

前言 紧接着上文《SpringBootWebSocket实现即时通讯&#xff08;一&#xff09;》 本博客姊妹篇 SpringBootWebSocket实现即时通讯&#xff08;一&#xff09;SpringBootWebSocket实现即时通讯&#xff08;二&#xff09;SpringBootWebSocket实现即时通讯&#xff08;三&…
阅读更多...
设计模式学习笔记 - 面向对象 - 1.面向对象到底讨论的是什么

设计模式学习笔记 - 面向对象 - 1.面向对象到底讨论的是什么

1.到底什么是面向对象编程和面向对象编程语言&#xff1f; 面向对象编程&#xff08;OOP&#xff09;的全称是 Object Oriented Programming。 面向对象编程语言&#xff08;OOPL&#xff09;的全称是 Object Oriented Programming Language。 面向对象编程中有两个非常重要的…
阅读更多...
第3.1章：StarRocks数据导入——Insert into 同步模式

第3.1章：StarRocks数据导入——Insert into 同步模式

一、概述 在StarRocks中&#xff0c;insert的语法和mysql等数据库的语法类似&#xff0c;并且每次insert into操作都是一次完整的导入事务。 主要的 insertInto 命令包含以下两种&#xff1a; insert into tbl select ...insert into tbl (col1, col2, ...) values (1, 2, ...…
阅读更多...
利用ChatGPT提升工作效率

利用ChatGPT提升工作效率

随着科技的飞速发展&#xff0c;人工智能逐渐成为我们生活的一部分。ChatGPT作为一种先进的自然语言处理技术&#xff0c;已经在各个领域取得了显著的成果。本文将探讨如何利用ChatGPT提升工作效率&#xff0c;让我们的生活变得更加便捷。 一、什么是ChatGPT&#xff1f; ChatG…
阅读更多...
day02_java基础_变量_数据类型等

day02_java基础_变量_数据类型等

零、今日内容 1 HelloWorld程序 2 idea使用 3 变量 4 数据类型 5 String 一、复习 班规班纪。。。。。 安装jdk JDK 是开发工具 JRE 是运行代码 JDK包含JRE 配置环境变量 二、HelloWorld程序 前提&#xff1a;JDK已经安装配置完毕&#xff0c;有了这些环境就敲代码 代码…
阅读更多...
WSL Arch使用及配置

WSL Arch使用及配置

下载、解压 ArchWSL # wsl配置 cat ~/.wslconfig [experimental] # 未生效可尝试修改为wsl2 autoMemoryReclaimdisabled # 可以在 gradual/dropcache/disabled 之间选择 networkingModemirrored dnsTunnelingtrue firewallfalse autoProxytrue sparseVhdtrue# wsl导入 cd D:\w…
阅读更多...
Python进程创建方式

Python进程创建方式

方法一 from multiprocessing import Process def worker_function(name): print(f"Worker {name} is working") if __name__ "__main__": # 创建进程实例 p1 Process(targetworker_function, args("Process 1",)) p2 Process(targetw…
阅读更多...
Vue路由组件练习

Vue路由组件练习

Vue 路由组件练习 1. 演示效果 2. 代码分析 2.1. 安装 vue-router 命令&#xff1a;npm i vue-router 应用插件&#xff1a;Vue.use(VueRouter) 2.2. 创建路由文件 在 src 文件夹下&#xff0c;创建router文件夹&#xff0c;并在该文件夹创建index.js文件 2.3. 导入依赖…
阅读更多...
普中51单片机学习（定时器和计数器）

普中51单片机学习（定时器和计数器）

定时器和计数器 51单片机有两组定时器/计数器&#xff0c;因为既可以定时&#xff0c;又可以计数&#xff0c;故称之为定时器/计数器。定时器/计数器和单片机的CPU是相互独立的。定时器/计数器工作的过程是自动完成的&#xff0c;不需要CPU的参与。51单片机中的定时器/计数器是…
阅读更多...
＜网络安全＞《43 网络攻防专业课＜第九课 - 跨站脚本攻击及防范＞》

＜网络安全＞《43 网络攻防专业课＜第九课 - 跨站脚本攻击及防范＞》

1 什么是XSS XSS(cross site script)或者说跨站脚本是一种Web应用程序的漏洞&#xff0c;恶意攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被执行&#xff0c;从而达到恶意攻击用户的目的。 2 XSS脚本实例 …
阅读更多...
城市智能交通指挥中心系统方案

城市智能交通指挥中心系统方案

二、方案设计 1.简介 公路治安卡口子系统实现对交通流信息的及时采集和各类嫌疑车辆的查控与处置&#xff0c;扼制并打击一些显见性违规违法行为。其主要功能包括&#xff1a;车辆图像记录、速度测定、车辆号牌识别、自动报警、数据检索、流量统计、图像存贮、数据传输和远程…
阅读更多...
在前后端分离项目中如何设置统一返回格式

在前后端分离项目中如何设置统一返回格式

目录 一、步骤一 二、步骤二 在前后端分离的项目中&#xff0c;为了方便前后端交互&#xff0c;后端往往需要给前端返回固定的数据格式&#xff0c;但不同的实体类返回格式不同&#xff0c;所以在真实开发中&#xff0c;我们将所有API接口设置返回统一的格式。基本上包括的有…
阅读更多...
【vue3】手动实现md在线编辑

【vue3】手动实现md在线编辑

1.背景 由于知识库的一些.md格式的文件的文件内容可能会有变动&#xff0c;如果频繁下载修改后&#xff0c;再进行上传&#xff0c;会让用户操作不方便&#xff0c;为此接入md在线编辑功能 2 md在线编辑具体实现 2.1 搭建项目 搭建项目下载和引入bytemd和fflate相关依赖&…
阅读更多...
【深度优先搜索】【树】【状态压缩】2791. 树中可以形成回文的路径数

【深度优先搜索】【树】【状态压缩】2791. 树中可以形成回文的路径数

作者推荐 【深度优先搜索】【树】【有向图】【推荐】685. 冗余连接 II 本文涉及知识点 深度优先搜索 树 图论 状态压缩 LeetCode:2791. 树中可以形成回文的路径数 给你一棵 树&#xff08;即&#xff0c;一个连通、无向且无环的图&#xff09;&#xff0c;根 节点为 0 &am…
阅读更多...
lv15 I2C背景知识（裸机I2C、linux对I2C支持、MPU6050）4

lv15 I2C背景知识（裸机I2C、linux对I2C支持、MPU6050）4

一、I2C总线背景知识 SOC芯片平台的外设分为&#xff1a; 一级外设&#xff1a;外设控制器集成在SOC芯片内部 二级外设&#xff1a;外设控制器由另一块芯片负责&#xff0c;通过一些通讯总线与SOC芯片相连 Inter-Integrated Circuit&#xff1a; 字面意思是用于“集成电路之…
阅读更多...
最新文章

Copyright @ 2022~2023