一文把握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：

1. npm install axios
2. # 或者
3. yarn add axios

复制代码

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

发送一个 GET 哀求

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

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

复制代码

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

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

1. import axios from 'axios';
3. const newUser = {
4.   name: '方才兄',
5.   age: 30,
6. };
8. axios.post('https://api.example.com/users', newUser)
9.   .then(response => {
10.     console.log('创建成功:', response.data);
11.   })
12.   .catch(error => {
13.     console.error('创建失败:', error);
14.   });

复制代码

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

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

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

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

复制代码

响应拦截器

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

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

复制代码

错误处理

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

1. axios.get('https://api.example.com/users')
2.   .then(response => {
3.     console.log('用户列表:', response.data);
4.   })
5.   .catch(error => {
6.     if (error.response) {
7.       // 服务器响应错误
8.       console.error('响应错误:', error.response.data);
9.     } else if (error.request) {
10.       // 请求未发送
11.       console.error('请求未发送:', error.request);
12.     } else {
13.       // 其他错误
14.       console.error('其他错误:', error.message);
15.     }
16.   });

复制代码

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

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

1. import axios from 'axios';
3. // 创建一个Axios实例
4. const axiosInst = axios.create({
5.     baseURL: import.meta.env.VITE_API_URL+import.meta.env.VITE_API_PATH, //.env中的VITE_APP_API参数
6.     timeout: 1000, // 请求超时时间（毫秒）
7.     headers: {
8.         'Content-Type': 'application/json', // 设置默认的Content-Type
9.     },
10. });
12. // 封装 GET 请求
13. const get = (url, params = {}, config = {}) => {
14.     return axiosInst.get(url, {
15.         params,
16.         ...config,
17.     });
18. };
20. // 封装 POST 请求
21. const post = (url, data = {}, config = {}) => {
22.     return axiosInst.post(url, data, config);
23. };
25. // 封装 PUT 请求
26. const put = (url, data = {}, config = {}) => {
27.     return axiosInst.put(url, data, config);
28. };
30. // 封装 DELETE 请求
31. const del = (url, params = {}, config = {}) => {
32.     return axiosInst.delete(url, {
33.         params,
34.         ...config,
35.     });
36. };
38. // 请求拦截器
39. axiosInst.interceptors.request.use(
40.     (config) => {
41.         console.debug("interceptors.request start!")
42.         // 在发送请求之前做些什么，比如给请求头添加Token
43.         const token = localStorage.getItem('token'); // 从本地存储中获取token
44.         if (token) {
45.             config.headers['Authorization'] = `Bearer ${token}`;
46.         }
47.         return config;
48.     },
49.     (error) => {
50.         // 处理请求错误
51.         return Promise.reject(error);
52.     }
53. );
55. // 响应拦截器
56. axiosInst.interceptors.response.use(
57.     (response) => {
58.         console.debug("interceptors.response start!")
59.         // 统一处理响应数据，例如解析响应结构
60.         if (response.data.code === 200) {
61.             return response.data.data;
62.         } else {
63.             // 可以根据具体的业务需求处理非200的情况
64.             return Promise.reject(response.data.message);
65.         }
66.     },
67.     (error) => {
68.         // 统一处理响应错误
69.         let message = '';
70.         if (error.response) {
71.             // 请求已经发出，但是服务器响应一个状态码非 2xx 的范围
72.             switch (error.response.status) {
73.                 case 400:
74.                     message = '请求错误';
75.                     break;
76.                 case 401:
77.                     message = '未授权，请重新登录';
78.                     break;
79.                 case 403:
80.                     message = '拒绝访问';
81.                     break;
82.                 case 404:
83.                     message = '请求地址出错';
84.                     break;
85.                 case 500:
86.                     message = '服务器内部错误';
87.                     break;
88.                 default:
89.                     message = `连接错误 ${error.response.status}`;
90.             }
91.         } else {
92.             // 处理断网的情况
93.             if (!window.navigator.onLine) {
94.                 message = '网络已断开';
95.             } else {
96.                 message = '请求失败，请稍后重试';
97.             }
98.         }
99.         // 可以在这里显示错误提示信息
100.         console.error(message);
101.         return Promise.reject(error);
102.     }
103. );
105. export default {
106.     axiosInst,
107.     get,
108.     post,
109.     put,
110.     del,
111. };

复制代码

在vue中使用

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

1. import axiosInst from "./axiosInst.js";
3. /**
4. * 增删改查
5. */
6. const pagePublicArticle = (pageReq = {}) => {
7.     return axiosInst.post("/article/public/page", pageReq);
8. }
10. const getArticle = (id) => {
11.     return axiosInst.get("/article/" + id);
12. }
14. const addArticle = (articleSaveReq = {}) => {
15.     return axiosInst.post("/article", articleSaveReq);
16. }
17. const editArticle = (articleSaveReq = {}) => {
18.     return axiosInst.put("/article", articleSaveReq);
19. }
21. const deleteArticle = (id) => {
22.     return axiosInst.del("/article/" + id);
23. }
25. export default {
26.     pageArticle,
27.     getArticle,
28.     addArticle,
29.     editArticle,
30.     deleteArticle
31. }

复制代码

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

1. <script setup>
2. // 查询结果的容器
3. const searchResults = ref([]);
4.    
5. const performSearch = async () => {
6.   const trimmedQuery = searchStr.value.trim();
7.   if (!trimmedQuery) {
8.     searchResults.value = [];
9.     return;
10.   }
11. // 调用后端api，获取查询结果
12.   const pagePublicArticle = await articleApi.pagePublicArticle({
13.     page: 1,
14.     pageSize: 50,
15.     title: trimmedQuery
16.   });
17. // 将接口的响应报文赋值给容器
18.   searchResults.value = pagePublicArticle.records;
19. };
20. </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 哀求示例：

1. // 使用 fetch 和 Promise
2. function getUserData(userId) {
3.   return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
4.     .then((response) => {
5.       if (!response.ok) {
6.         throw new Error(`HTTP error! status: ${response.status}`);
7.       }
8.       return response.json();
9.     })
10.     .then((data) => {
11.       console.log(data); // 成功时的数据
12.       return data;
13.     })
14.     .catch((error) => {
15.       console.error("请求失败:", error.message); // 捕获错误
16.     });
17. }
19. getUserData(1);

复制代码

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

1. axios.interceptors.request.use(
2.   (config) => {
3.     config.headers.Authorization = "Bearer token";
4.     return config;
5.   },
6.   (error) => Promise.reject(error)
7. );

复制代码

取消哀求：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企服之家，中国第一个企服评测及商务社交产业平台。