axios的使用

server/2024/12/22 7:46:52/
htmledit_views">

1、axios的基本使用

1.1、简介

说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：

异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：

  • 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
  • jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架
  • Axios（ajax i/o system）：

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

axios具备以下特点：

在浏览器中创建XMLHttpRequest请求

在node.js中发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消要求

自动转换JSON数据

1.2、安装

1.2.1、通过cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.3、基本使用

1.3.1、准备服务器

模拟服务器，这里使用json-server

（1）安装json-server
npm install -g json-server
（2）创建数据源

在空文件夹下创建JSON文件作为数据源，例如 db.json

{"list": [{"id": "1","name": "唐僧","age": 20,"address": "东土大唐"},{"id": "2","name": "孙悟空","age": 500,"address": "花果山"},{"id": "3","name": "猪八戒","age": 330,"address": "高老庄"},{"id": "4","name": "沙悟净","age": 200,"address": "流沙河"},{"id": "5","name": "红孩儿","age": 10,"address": "火焰山"}]
}
（3）启动服务器

使用以下命令启动json-server，并将JSON文件作为参数传递给服务器。这将在本地计算机的3000端口上启动服务器，并将db.json文件中的数据暴露为RESTful API。

方式一、//db.json是文件名

json-server  db.json

方式二、

json-server --watch db.json

方式三、

跟db.json同级目录，创建package.json文件，配置别名

{"scripts":{"mock":"json-server --watch db.json"}
}

启动方式：npm run mock

1.3.2、各种请求方式

1.3.2.1、get请求

获取数据，请求指定的信息，返回实体对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> --><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style></head><body><div id="warp"><button onclick="getInfo()">get请求</button><ul class="showUser"></ul></div><script>// get请求async function getInfo() {// 请求结果处理方法一：// axios.get("http://localhost:3000/list").then(//   (res) => {//     // 将请求到的结果进行渲染//     render(res.data);//   },//   (err) => {//     console.log(err);//   }// );// 请求结果处理方法二：// axios//   .get("http://localhost:3000/list")//   .then((res) => {//     // 将请求到的结果进行渲染//     render(res.data);//   })//   .catch((err) => {//     console.log(err);//   });// 请求结果处理方法三：推荐使用第三种try {let res = await axios.get("http://localhost:3000/list");render(res.data);} catch (error) {console.log(err);}}// 渲染函数function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>删除</a></li>`;});showUser.innerHTML = str;}</script></body>
</html>

此外get请求，还可以携带参数

// get请求带参数方式一
// try {
//   let res = await axios.get("http://localhost:3000/list?id=1");
//   render(res.data);
// } catch (error) {
//   console.log(err);
// }
// get请求带参数方式二
try {let res = await axios.get("http://localhost:3000/list", {params: {id: 2,},});render(res.data);
} catch (error) {console.log(err);
}
1.3.2.2、post请求：

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style></head><body><div id="warp"><button onclick="postInfo()">post请求</button><ul class="showUser"></ul></div><script>// post请求async function postInfo() {await axios.post("http://localhost:3000/list", {name: "蜘蛛精",age: 200,address: "盘丝洞",});// 重新获取数据，渲染let res = await axios.get("http://localhost:3000/list");render(res.data);// console.log(res.data);}// 渲染函数function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>删除</a></li>`;});showUser.innerHTML = str;}</script></body>
</html>
1.3.2.3、put请求：

更新数据，从客户端向服务器传送的数据取代指定的文档的内容

会把更新的数据完全替代原数据，如果只修改了部分的数据，原数据其他内容都会丢失

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style></head><body><div id="warp"><button onclick="putInfo()">put请求-修改数据</button><ul class="showUser"></ul></div><script>// put请求async function putInfo() {let res = await axios.put("http://localhost:3000/list/1", {name: "玉皇大帝",});// 渲染getData()}// 重新获取数据，渲染async function getData() {let res = await axios.get("http://localhost:3000/list");render(res.data);}// 渲染函数function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>删除</a></li>`;});showUser.innerHTML = str;}</script></body>
</html>
1.3.2.4、patch请求：

更新数据，是对put方法的补充，用来对已知资源进行局部更新

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style></head><body><div id="warp"><button onclick="patchInfo()">patch请求-修改数据</button><ul class="showUser"></ul></div><script>// patch请求async function patchInfo() {let res = await axios.patch("http://localhost:3000/list/2", {name: "王母娘娘",});// 渲染getData();}// 重新获取数据，渲染async function getData() {let res = await axios.get("http://localhost:3000/list");render(res.data);}// 渲染函数function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>删除</a></li>`;});showUser.innerHTML = str;}</script></body>
</html>
1.3.2.5、delete请求：

请求服务器删除指定的数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style></head><body><div id="warp"><button onclick="deleteInfo()">delet请求-修改数据</button><ul class="showUser"></ul></div><script>// delete请求async function deleteInfo() {let res = await axios.delete("http://localhost:3000/list/1");// 渲染getData();}// 重新获取数据，渲染async function getData() {let res = await axios.get("http://localhost:3000/list");render(res.data);}// 渲染函数function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>删除</a></li>`;});showUser.innerHTML = str;}</script></body>
</html>

1.3.3、axios的配置

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

1.3.3.1、全局配置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script></head><body><button id="btn" onclick="getData()">发送请求</button><script>//配置全局的超时时长axios.defaults.timeout = 2000;//配置全局的基本URLaxios.defaults.baseURL = "http://localhost:3000";async function getData() {try {let res1 = await axios.get("/list");let res2 = await axios.get("/user");console.log(res1.data);console.log(res2.data);} catch (error) {console.log(error);}}</script></body>
</html>
1.3.3.2、实例配置

在一个项目中，我们会有很多不同的请求，如果都用axios去请求，很容易造成冲突，所以我们可以去创建axios的实例，通过不同的实例去请求，配置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script></head><body><button id="btn" onclick="getData()">发送请求</button><script>async function getData() {// 创建实例1，创建同时配置let instance = axios.create({baseURL: "http://localhost:3000",timeout: 2000,});let res = await instance.get("/list");console.log(res.data);// 创建实例2，现创建，再配置let instance2 = axios.create();instance2.defaults.timeout = 2;instance2.defaults.baseURL = "http://localhost:3000";let res2 = await instance.get("/user");console.log(res2.data);}</script></body>
</html>

axios实例常用配置：

    • baseURL 请求的域名，基本地址，类型：String
    • timeout 请求超时时长，单位ms，类型：Number
    • url 请求路径，类型：String
    • method 请求方法，类型：String
    • headers 设置请求头，类型：Object
    • params 请求参数，将参数拼接在URL上，类型：Object
    • data 请求参数，将参数放到请求体中，类型：Object
1.3.3.3、请求配置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script></head><body><button id="btn" onclick="getData()">发送请求</button><script>async function getData() {let res = await axios.get("http://localhost:3000/list", {timeout: 2000,});console.log(res.data);}</script></body>
</html>

1.3.4、axios的拦截器

axios给我们提供了两大类拦截器

请求方向的拦截（成功请求，失败请求）

响应方向的拦截（成功的，失败的）

拦截器的作用，用于我们在网络请求的时候，在发起请求或者响应时对操作进行处理

例如：发送请求时，可以添加网页加载的动画，或认证token，强制用户先登录再请求数据

响应的时候，可以结束网页加载的动画，或者对响应的数据进行处理

1.3.4.1、请求拦截器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script></head><body><button id="btn" onclick="getData()">发送请求</button><script>// 请求拦截器async function getData() {axios.interceptors.request.use((config) => {// 发生请求前的一系列的处理console.log("开启加载动画");console.log("认证是否有token，如果没有，要去登录");return config; //拦截后的放行},(err) => {// 请求错误处理return Promise.reject(err);});let res = await axios.get("http://localhost:3000/list");console.log(res.data);}</script></body>
</html>
1.3.4.2、相应拦截器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script></head><body><button id="btn" onclick="getData()">发送请求</button><script>// 响应拦截器async function getData() {axios.interceptors.response.use((config) => {// 数据回来前的一系列的处理console.log("关闭加载动画");console.log("对数据进行一些数据");return config.data; //拦截后的放行},(err) => {// 响应错误处理return Promise.reject(err);});let res = await axios.get("http://localhost:3000/list");console.log(res.data);}</script></body>
</html>
1.3.4.3、取消拦截
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script></head><body><button id="btn" onclick="getData()">发送请求</button><script>// 请求拦截器async function getData() {let instance = axios.create();instance.interceptors.request.use((config) => {// 发生请求前的一系列的处理console.log("开启加载动画");console.log("认证是否有token，如果没有，要去登录");return config; //拦截后的放行},(err) => {// 请求错误处理return Promise.reject(err);});// 取消拦截axios.interceptors.request.eject(instance);let res = await axios.get("http://localhost:3000/list");console.log(res.data);}</script></body>
</html>

2、Vue中axios的使用

2.1、基本使用

2.1.1、npm安装

终端安装：

 npm install axios

2.1.2、在Vue原型上配置$axios

在vue项目的main.js文件中引入axios

// 导入axios
import axios from 'axios'
// 将axios放到Vue原型上，这样vm，vc身上就都有axios了
Vue.prototype.$axios=axios

2.1.3、在组件中使用：

<button @click="getDate">点击发送请求</button><script>
export default {name: 'App',methods: {async getDate() {let res = await this.$axios.get('http://localhost:3000/list')console.log(res.data);}}
}
</script>

2.2、一次封装

如果是多个组件都需要发送请求，而且每次请求前，我们都要进行一些验证处理等，可以进行简单封装

2.2.1、封装request.js

src/utils创建request.js

/* 封装axios用于发送请求 */
import axios from "axios";/*
(1)request 相当于 Axios 的实例对象
(2)为什么要有request,而不是直接用axios* 项目开发中，有可能会有两个基地址* 不同的接口配置不同（有的要token,有的不要token）
*/
const request = axios.create({baseURL: "http://localhost:3000", // 设置基地址timeout: 2000, // 请求超时：当2s没有响应就会结束请求
});// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
request.interceptors.request.use(function (config) {// 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加// 例如1config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换// 例如2config.headers = {"Content-Type": "application/x-www-form-urlencoded", // 配置请求头};// 例如3//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookieconst token = getCookie("名称"); // 这里取token之前，你肯定需要先拿到token,存一下if (token) {config.params = { token: token }; // 如果要求携带在参数中config.headers.token = token; // 如果要求携带在请求头中}return config; //拦截后的放行}, function (error) {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
request.interceptors.response.use(function (response) {// 对响应数据做点什么console.log('关闭请求数据动画');console.log('对数据进行处理');return response.data; //只要响应对象中的数据},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);export default request;

第一次封装，引入了基地址与拦截器

2.2.2、组件中使用

<script>
import request from '../utils/request'
export default {name: 'ShowList',methods: {async getList() {// 基本路径已经配置过let res = await request.get('/list')//这里的res也是响应拦截器里处理之后的结果console.log(res);}}
}
</script>
<script>
import request from '@/utils/request';
export default {name: 'ShowUser',methods: {async getUser() {let res = await request.get('/user')console.log(res);}}}
</script>

2.3、二次封装

项目当中会有很多的页面，如果每个页面中都会多次请求，将我们的请求都写在对应的页面中，比较难以维护，所以可以将请求再次进行封装，类似如下效果：

src/apis/showList.js

// 导入一次封装的request
import request from "@/utils/request";
// 请求list数据
export function getListInfo1() {return request.get("/list");
}
// 请求user数据
export function getUserInfo1() {return request.get("/user");
}

showList.vue

<script>
import { getListInfo1, getUserInfo1 } from '../apis/showList'
export default {name: 'ShowList',methods: {async getList1() { //	调用请求函数let res = await getListInfo1()console.log(res);},async getUser1() {let res = await getUserInfo1()console.log(res);}}
}
</script>


http://www.ppmy.cn/server/152175.html

相关文章

如何从 ASP.NET Core IIS上传大文件一些配置

如何从 ASP.NET Core IIS上传大文件一些配置

使用ASP.NET Core上传文件&#xff0c;可以参考官方文档&#xff1a; 使用缓冲模型绑定上传小文件到物理存储。 默认情况下&#xff0c;Windows IIS 将maxRequestLength和maxAllowedContentLength分别限制为 4096 KB 和 30,000,000 字节。要上传大于这些限制的文件&#xff0c;…
阅读更多...
LabVIEW伸缩臂参数监控系统

LabVIEW伸缩臂参数监控系统

LabVIEW开发伸缩臂越野叉车参数监控系统主要应用于工程机械中的越野叉车&#xff0c;以提高车辆的作业效率和故障诊断能力。系统通过PEAK CAN硬件接口和LabVIEW软件平台实现对叉车作业参数的实时监控和故障分析&#xff0c;具有良好的实用性和推广价值。 系统组成 系统主要由P…
阅读更多...
Python选择题训练工具：高效学习、答题回顾与音频朗读一站式体验

Python选择题训练工具：高效学习、答题回顾与音频朗读一站式体验

一、引言 随着人工智能技术的不断进步&#xff0c;传统的教学方式已经逐渐向智能化、互动化转变。在众多英语测试题型中&#xff0c;选择题作为一种高效的方式被广泛应用于各类培训与考试中。为了帮助学生高效学习与自测&#xff0c;本篇文章将采用Python编写一款基于 Python …
阅读更多...
鸿蒙开发（18）arkTS类型

鸿蒙开发（18）arkTS类型

联合类型 let a:string | number 12 //联合类型键值对类型 let map:Record<string,number>{ abc:1}枚举 //枚举字段表示性别有哪些取值 enum 枚举名 {枚举字段1:值1,枚举字段2:值2,枚举字段3:值3, } //以性别为例 enum Gender {male "美女",female "帅…
阅读更多...
uniapp blob格式转换为video .mp4文件使用ffmpeg工具

uniapp blob格式转换为video .mp4文件使用ffmpeg工具

前言 介绍一下这三种对象使用场景 您前端一旦涉及到文件或图片上传Q到服务器&#xff0c;就势必离不了 Blob/File /base64 三种主流的类型它们之间 互转 也成了常态 Blob - FileBlob -Base64Base64 - BlobFile-Base64Base64 _ File uniapp 上传文件 现在已获取到了blob格式的…
阅读更多...
OpenHarmony-4.HDI 框架

OpenHarmony-4.HDI 框架

HDI 框架 1.HDI介绍 HDI&#xff08;Hardware Device Interface&#xff0c;硬件设备接口&#xff09;是HDF驱动框架为开发者提供的硬件规范化描述性接口&#xff0c;位于基础系统服务层和设备驱动层之间&#xff0c;是连通驱动程序和系统服务进行数据流通的桥梁&#xff0c;是…
阅读更多...
【MongoDB】使用 MongoDB 存储日志、审批、MQ等数据的案例及优点

【MongoDB】使用 MongoDB 存储日志、审批、MQ等数据的案例及优点

文章目录 使用MongoDB存储日志数据使用MongoDB存储MQ数据使用MongoDB存储审批数据队列与MongoDB的差异 更多相关内容可查看 在 64 位系统上&#xff0c;使用 ext4 文件系统&#xff0c;文件大小可以达到 16TB&#xff08;这只是文件系统层面的限制&#xff0c;实际情况还会受到…
阅读更多...
论文浅尝 | HippoRAG：神经生物学启发的大语言模型的长期记忆（Neurips2024）

论文浅尝 | HippoRAG：神经生物学启发的大语言模型的长期记忆（Neurips2024）

笔记整理&#xff1a;陈少凯&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱、RAG 论文链接&#xff1a;https://arxiv.org/pdf/2405.14831 发表会议&#xff1a;Neurips 2024 1. 动机 虽然近年来大语言模型&#xff08;LLM&#xff09;的研究取得了很大进展&#x…
阅读更多...
最新文章

Copyright @ 2022~2023