IT评测·应用市场-qidao123.com

标题: 一文把握Axios [打印本页]

作者: 瑞星 时间: 2025-2-13 16:14
标题: 一文把握Axios
本文转载自：https://fangcaicoding.cn/course/12/68
大家好！我是方才，目前是8人后端研发团队的负责人，拥有6年后端经验&3年团队管理经验。
  系统学习践行者！近期在系统化输出前端入门相关技能文章，期望能帮大家构建一个完备的知识体系。
  如果对你有所资助，记得一键三连！
  我创建了一个编程学习交换群（扫码关注后即可加入），秉持“一群人可以走得更远”的理念，期待与你一起 From Zero To Hero！
  茫茫人海，遇见即是缘分！方才兄送你ElasticSearch系列知识图谱、前端入门系列知识图谱、系统架构师备考资料！
  一文把握Axios

ps：学习 Axios需要相识最基本的HTTP知识，至少需要知晓GET/POST/PUT/DELETE等方法的基本使用；同时也需要相识json的基本知识，知晓json数据的基本格式。
  能解决的问题

你写了一个很棒的**前端项目，一切顺遂运行，直到你需要和后端举行数据交互时。**此时，前端的页面和后端的服务器就像是两个相隔千里的邻居，相互之间的沟通仿佛隔着一道厚墙。你想要的数据哀求和响应总是有点“卡壳”，问题重重。这时，Axios 就成了你解决问题的利器。是不是内心在想，怎么就这么巧，今天的文章正好讲这个？
今天，我们就来一起探索如何用 Axios 轻松搞定前端与后端的数据交互，且从此告别“数据哀求卡壳”的困扰。
在本篇文章中，我们将系统地先容 Axios，让你全面相识它的焦点概念、基本用法及高级本领。你将学到如何发送 GET 哀求、POST 哀求、处理哀求和响应拦截器、处理错误等。最紧张的是，我们将通过一系列简单易懂的示例，让你快速把握如何将 Axios 与 Vue框架联合使用，实现高效的数据哀求和处理。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 库，主要用于浏览器和 Node.js 中发送 HTTP 哀求。你可以用它发送各种范例的哀求（如 GET、POST、PUT、DELETE 等），并且可以或许轻松地处理哀求和响应的数据。简单来说，它让前端和后端的“对话”变得简单且流畅。
安装 Axios

起首，打开你的项目终端，使用 npm 或 yarn 安装 Axios：

npm install axios
# 或者
yarn add axios

复制代码

安装完成后，你就可以在vue项目中引入并使用 Axios 了。
哀求示例

发送一个 GET 哀求

让我们先来看一个简单的 GET 哀求示例。假设我们需要获取一个用户列表：

import axios from 'axios';
axios.get('https://api.example.com/users')
.then(response => {
console.log('用户列表:', response.data);
})
.catch(error => {
console.error('请求出错:', error);
});

复制代码

这里的 get 方法发出了一个 GET 哀求，访问 https://api.example.com/users，然后通过 .then() 获取成功的响应数据，通过 .catch() 处理哀求错误。
发送一个 POST 哀求

接下来，我们来发送一个 POST 哀求，提交一个新的用户数据：

import axios from 'axios';
const newUser = {
name: '方才兄',
age: 30,
};
axios.post('https://api.example.com/users', newUser)
.then(response => {
console.log('创建成功:', response.data);
})
.catch(error => {
console.error('创建失败:', error);
});

复制代码

在这里，我们通过 axios.post 发送了一个包含新用户数据的哀求。如果哀求成功，控制台会打印出响应数据；如果失败，控制台会打印出错误信息。
哀求和响应拦截器

有时候，我们需要对哀求和响应做一些统一的处理，比如添加哀求头、统一处理错误等。Axios 提供了哀求拦截器和响应拦截器来资助我们做这些事情。
哀求拦截器

哀求拦截器通常用来修改哀求，比方添加认证 token、设置自界说哀求头等：

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

复制代码

响应拦截器

响应拦截器通常用来处理响应数据或错误，比方统一处理错误信息：

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

复制代码

错误处理

在现实开发中，网络哀求总是不可制止地会遇到各种错误。比方，服务器错误、网络断开、哀求超时等。Axios 为我们提供了机动的错误处理机制。

axios.get('https://api.example.com/users')
.then(response => {
console.log('用户列表:', response.data);
})
.catch(error => {
if (error.response) {
// 服务器响应错误
console.error('响应错误:', error.response.data);
} else if (error.request) {
// 请求未发送
console.error('请求未发送:', error.request);
} else {
// 其他错误
console.error('其他错误:', error.message);
}
});

复制代码

通过判定 error.response、error.request 和 error.message，我们可以更精致地捕获和处理差别范例的错误。
vue中的工具类封装

我们在vue项目中，通常会统一封装工具类，更加方便在其他文件中的使用。
封装axiosInst.js

import axios from 'axios';
// 创建一个Axios实例
const axiosInst = axios.create({
baseURL: import.meta.env.VITE_API_URL+import.meta.env.VITE_API_PATH, //.env中的VITE_APP_API参数
timeout: 1000, // 请求超时时间（毫秒）
headers: {
'Content-Type': 'application/json', // 设置默认的Content-Type
},
});
// 封装 GET 请求
const get = (url, params = {}, config = {}) => {
return axiosInst.get(url, {
params,
...config,
});
};
// 封装 POST 请求
const post = (url, data = {}, config = {}) => {
return axiosInst.post(url, data, config);
};
// 封装 PUT 请求
const put = (url, data = {}, config = {}) => {
return axiosInst.put(url, data, config);
};
// 封装 DELETE 请求
const del = (url, params = {}, config = {}) => {
return axiosInst.delete(url, {
params,
...config,
});
};
// 请求拦截器
axiosInst.interceptors.request.use(
(config) => {
console.debug("interceptors.request start!")
// 在发送请求之前做些什么，比如给请求头添加Token
const token = localStorage.getItem('token'); // 从本地存储中获取token
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(error) => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
axiosInst.interceptors.response.use(
(response) => {
console.debug("interceptors.response start!")
// 统一处理响应数据，例如解析响应结构
if (response.data.code === 200) {
return response.data.data;
} else {
// 可以根据具体的业务需求处理非200的情况
return Promise.reject(response.data.message);
}
},
(error) => {
// 统一处理响应错误
let message = '';
if (error.response) {
// 请求已经发出，但是服务器响应一个状态码非 2xx 的范围
switch (error.response.status) {
case 400:
message = '请求错误';
break;
case 401:
message = '未授权，请重新登录';
break;
case 403:
message = '拒绝访问';
break;
case 404:
message = '请求地址出错';
break;
case 500:
message = '服务器内部错误';
break;
default:
message = `连接错误 ${error.response.status}`;
}
} else {
// 处理断网的情况
if (!window.navigator.onLine) {
message = '网络已断开';
} else {
message = '请求失败，请稍后重试';
}
}
// 可以在这里显示错误提示信息
console.error(message);
return Promise.reject(error);
}
);
export default {
axiosInst,
get,
post,
put,
del,
};

复制代码

在vue中使用

按业务范例封装，比如说博客文章相关的articleApi.js
- 以下示例，包括了对GET/POST/PUT/DELETE方法的封装

import axiosInst from "./axiosInst.js";
/**
* 增删改查
*/
const pagePublicArticle = (pageReq = {}) => {
return axiosInst.post("/article/public/page", pageReq);
}
const getArticle = (id) => {
return axiosInst.get("/article/" + id);
}
const addArticle = (articleSaveReq = {}) => {
return axiosInst.post("/article", articleSaveReq);
}
const editArticle = (articleSaveReq = {}) => {
return axiosInst.put("/article", articleSaveReq);
}
const deleteArticle = (id) => {
return axiosInst.del("/article/" + id);
}
export default {
pageArticle,
getArticle,
addArticle,
editArticle,
deleteArticle
}

复制代码

以方才coding博客的搜索功能为例：在vue文件中使用articleApi.js

<script setup>
// 查询结果的容器
const searchResults = ref([]);
const performSearch = async () => {
const trimmedQuery = searchStr.value.trim();
if (!trimmedQuery) {
searchResults.value = [];
return;
}
// 调用后端api，获取查询结果
const pagePublicArticle = await articleApi.pagePublicArticle({
page: 1,
pageSize: 50,
title: trimmedQuery
});
// 将接口的响应报文赋值给容器
searchResults.value = pagePublicArticle.records;
};
</script>

复制代码

用户交互效果：

axios 和 Promise对比

axios 和 Promise 是两个差别层面的工具。Promise 是 JavaScript 内置的用于处理异步操作的对象，而 axios 是一个基于 Promise 的 HTTP 客户端库。它可以资助我们更简单、更便捷地发送 HTTP 哀求，并主动管理返回的 Promise 对象。接下来，我们详细对比 Promise 和 axios 的特点与用法。
axios 和 Promise 的关系
axios 是基于 Promise 实现的，也就是说 axios 哀求返回的是一个 Promise 对象。axios 封装了 XMLHttpRequest，可以或许简化处理 HTTP 哀求，淘汰手动处理 Promise 相关逻辑的繁琐代码。
Promise 和 axios 的主要区别
功能Promiseaxios作用管理异步操作基于 Promise 封装的 HTTP 哀求库使用场景任何异步逻辑（如文件读取、定时器等）主要用于发送 HTTP 哀求，常见于 API 调用返回值提供 then、catch、finally 方法返回一个 Promise，可以直接调用这些方法异常处理通过 catch 方法捕获内置错误拦截器，可根据 HTTP 状态码处理差别错误扩展性需要手动封装，机动性高内置多种配置项，如哀求头、超时时间、拦截器等 Promise 的使用示例
如果不使用 axios，而是手动用 fetch 或其他 API 发起哀求，代码大概会略显复杂。以下是一个使用 Promise 的 HTTP 哀求示例：

// 使用 fetch 和 Promise
function getUserData(userId) {
return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log(data); // 成功时的数据
return data;
})
.catch((error) => {
console.error("请求失败:", error.message); // 捕获错误
});
}
getUserData(1);

复制代码

在这个例子中，我们用 fetch 发起哀求，返回的也是一个 Promise，并通过 .then() 和 .catch() 来处理成功和失败的环境。
axios 的主要功能与优势
主动解析响应数据：axios 会主动解析 JSON 响应，而使用 fetch 需要手动调用 response.json()。
哀求/响应拦截器：可以在哀求发送前或响应接收后举行统一处理。比方，添加认证头或错误处理。

axios.interceptors.request.use(
(config) => {
config.headers.Authorization = "Bearer token";
return config;
},
(error) => Promise.reject(error)
);

复制代码

取消哀求：axios 支持取消哀求，尤其在复杂的应用中（如 React、Vue 项目），制止不须要的哀求。更好的错误处理：axios 能根据差别的 HTTP 状态码主动分类错误，使得错误处理更清晰。
配置方便：可以在实例化 axios 时设置默认配置，比方基 URL、超时时间、头信息等。
哀求数据格式化：主动将哀求参数格式化为查询字符串，或在 POST 哀求时主动序列化 JSON 数据。
总结

机动性：Promise 是一个通用的异步操作管理工具，而 axios 是专门针对 HTTP 哀求封装的库。使用 axios 可以淘汰异步 HTTP 哀求时的代码量和复杂性。
主动化处理：axios 提供哀求和响应拦截器、错误处理、主动 JSON 解析等功能，得当对 HTTP 哀求有大量需求的项目。
简单上手：使用 axios 发起哀求更简单，可以直接得到解析后的数据并处理错误，而不需要额外的代码。

axios 让基于 Promise 的 HTTP 哀求更强大和便捷，在现实开发中黑白常常用的选择。如果项目中大量依靠 API 哀求，axios 可以大大简化代码，提高开发效率。
总结扩展

在本文中，我们已经全面先容了 Axios 的基本使用，包括如何发送哀求、处理响应、配置拦截器、处理错误等。通过本篇教程，你应该可以或许轻松把握 Axios，并将它应用于自己的项目中。
接下来，你可以进一步深入学习 Axios 的更多高级特性，比如取消哀求、并行哀求、哀求超时控制等。Axios 是一个非常强大的工具，它可以或许资助你轻松应对前端与后端之间的数据交互。
记着，编程之路不止一步，方才兄始终伴随着你，带你一起走得更远。希望你能在使用 Axios 时游刃有余，处理数据哀求时如鱼得水，冲破那道厚厚的“隔墙”！

希望今天的分享对你有所资助！别忘了，前端之路，方才兄与你偕行！—
近期更新筹划

近期更新筹划（有需要的小同伴，记得点赞关注哟！）

输出vue、router、elementplus等前端框架技能文章，期望能资助大家快速建立相关的知识体系；
基于vue3+springboot3的前后端分离的博客系统已经开源啦，接待大家star！https://gitee.com/fangcaicoding/fangcai-coding-blog

“学编程，肯定要系统化”——若你也是系统学习的践行者，记得点赞关注，期待与你一起 From Zero To Hero！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)