f IOS-深入学习Axios：当代前端HTTP哀求利器 - Powered by qidao123.com技术社区

深入学习Axios：当代前端HTTP哀求利器

用多少眼泪才能让你相信  论坛元老 | 2025-5-3 23:08:04 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1850|帖子 1850|积分 5552

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
深入学习Axios：当代前端HTTP哀求利器

Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境。它已经成为当代前端开发中最流行的HTTP哀求库之一，因其简洁的API和强盛的功能而广受开发者喜好。本文将全面先容Axios的核心特性和使用方法。
一、Axios简介与安装

什么是Axios？

Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。它具有以下主要特点：


  • 在浏览器中创建XMLHttpRequests
  • 在node.js中创建http哀求
  • 支持Promise API
  • 拦截哀求和相应
  • 转换哀求数据和相应数据
  • 自动转换JSON数据
  • 客户端支持防御XSRF
安装Axios

可以通过多种方式安装Axios：

  • 使用npm安装：
  1. npm install axios
复制代码

  • 使用yarn安装：
  1. yarn add axios
复制代码

  • 通过CDN直接引入：
  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码
二、Axios基础使用

发起GET哀求

  1. // 最简单的GET请求
  2. axios.get('/user?ID=12345')
  3.   .then(response => {
  4.     console.log(response.data);
  5.   })
  6.   .catch(error => {
  7.     console.log(error);
  8.   });
  10. // 带参数的GET请求
  11. axios.get('/user', {
  12.     params: {
  13.       ID: 12345
  14.     }
  15.   })
  16.   .then(response => {
  17.     console.log(response);
  18.   })
  19.   .catch(error => {
  20.     console.log(error);
  21.   });
复制代码
发起POST哀求

  1. axios.post('/user', {
  2.     firstName: 'Fred',
  3.     lastName: 'Flintstone'
  4.   })
  5.   .then(response => {
  6.     console.log(response);
  7.   })
  8.   .catch(error => {
  9.     console.log(error);
  10.   });
复制代码
并发哀求

  1. function getUserAccount() {
  2.   return axios.get('/user/12345');
  3. }
  5. function getUserPermissions() {
  6.   return axios.get('/user/12345/permissions');
  7. }
  9. axios.all([getUserAccount(), getUserPermissions()])
  10.   .then(axios.spread((acct, perms) => {
  11.     // 两个请求都完成后执行
  12.     console.log(acct.data, perms.data);
  13.   }));
复制代码
三、Axios高级特性

创建Axios实例

可以创建自定义设置的Axios实例：
  1. const instance = axios.create({
  2.   baseURL: 'https://api.example.com',
  3.   timeout: 1000,
  4.   headers: {'X-Custom-Header': 'foobar'}
  5. });
  7. // 使用实例
  8. instance.get('/users')
  9.   .then(response => {
  10.     console.log(response.data);
  11.   });
复制代码
设置默认值

可以设置全局的Axios默认值：
  1. // 设置全局baseURL
  2. axios.defaults.baseURL = 'https://api.example.com';
  4. // 设置请求头
  5. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  6. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
复制代码
拦截器

Axios提供了哀求和相应拦截器：
  1. // 添加请求拦截器
  2. axios.interceptors.request.use(config => {
  3.     // 在发送请求前做些什么
  4.     config.headers.Authorization = 'Bearer token';
  5.     return config;
  6.   }, error => {
  7.     // 对请求错误做些什么
  8.     return Promise.reject(error);
  9.   });
  11. // 添加响应拦截器
  12. axios.interceptors.response.use(response => {
  13.     // 对响应数据做点什么
  14.     return response.data; // 通常我们只需要response.data
  15.   }, error => {
  16.     // 对响应错误做点什么
  17.     return Promise.reject(error);
  18.   });
复制代码
取消哀求

Axios支持取消哀求的功能：
  1. const CancelToken = axios.CancelToken;
  2. const source = CancelToken.source();
  4. axios.get('/user/12345', {
  5.   cancelToken: source.token
  6. }).catch(thrown => {
  7.   if (axios.isCancel(thrown)) {
  8.     console.log('Request canceled', thrown.message);
  9.   } else {
  10.     // 处理错误
  11.   }
  12. });
  14. // 取消请求（message参数是可选的）
  15. source.cancel('Operation canceled by the user.');
复制代码
四、Axios与TypeScript

Axios提供了完善的TypeScript支持：
  1. interface User {
  2.   id: number;
  3.   name: string;
  4.   email: string;
  5. }
  7. // 获取用户数据
  8. axios.get<User>('/user/1')
  9.   .then(response => {
  10.     console.log(response.data.name); // 类型安全
  11.   });
  13. // 创建用户
  14. axios.post<User>('/users', {name: 'John', email: 'john@example.com'})
  15.   .then(response => {
  16.     console.log(response.data.id);
  17.   });
复制代码
五、最佳实践

1. 封装Axios

在现实项目中，发起对Axios举行封装：
  1. // api.js
  2. import axios from 'axios';
  4. const api = axios.create({
  5.   baseURL: process.env.REACT_APP_API_BASE_URL,
  6.   timeout: 10000,
  7. });
  9. // 请求拦截器
  10. api.interceptors.request.use(
  11.   config => {
  12.     const token = localStorage.getItem('token');
  13.     if (token) {
  14.       config.headers.Authorization = `Bearer ${token}`;
  15.     }
  16.     return config;
  17.   },
  18.   error => Promise.reject(error)
  19. );
  21. // 响应拦截器
  22. api.interceptors.response.use(
  23.   response => response.data,
  24.   error => {
  25.     if (error.response.status === 401) {
  26.       // 处理未授权
  27.       window.location.href = '/login';
  28.     }
  29.     return Promise.reject(error);
  30.   }
  31. );
  33. export default api;
复制代码
2. 错误处置惩罚

统一的错误处置惩罚机制：
  1. // 封装请求函数
  2. async function request(url, method = 'get', data = null) {
  3.   try {
  4.     const response = await axios({
  5.       method,
  6.       url,
  7.       data
  8.     });
  9.     return response.data;
  10.   } catch (error) {
  11.     if (error.response) {
  12.       // 请求已发出，服务器返回状态码不在2xx范围内
  13.       console.error('Error response:', error.response.data);
  14.       console.error('Status:', error.response.status);
  15.       console.error('Headers:', error.response.headers);
  16.     } else if (error.request) {
  17.       // 请求已发出，但没有收到响应
  18.       console.error('Error request:', error.request);
  19.     } else {
  20.       // 发送请求时发生了一些事情
  21.       console.error('Error message:', error.message);
  22.     }
  23.     throw error;
  24.   }
  25. }
复制代码
3. 联合async/await

使用async/await可以更清楚地处置惩罚异步哀求：
  1. async function fetchData() {
  2.   try {
  3.     const [usersResponse, postsResponse] = await Promise.all([
  4.       axios.get('/users'),
  5.       axios.get('/posts')
  6.     ]);
  7.    
  8.     console.log('Users:', usersResponse.data);
  9.     console.log('Posts:', postsResponse.data);
  10.   } catch (error) {
  11.     console.error('Error fetching data:', error);
  12.   }
  13. }
复制代码
六、常见问题与解决方案

1. 跨域问题

前端开发中经常会遇到跨域问题，可以通过以下方式解决：


  • 后端设置CORS
  • 开发环境使用代理
  • 设置axios的baseURL为相对路径
2. CSRF防护

对于CSRF防护，Axios提供了内置支持：
  1. axios.defaults.xsrfCookieName = 'csrftoken';
  2. axios.defaults.xsrfHeaderName = 'X-CSRFToken';
复制代码
3. 文件上传

使用Axios上传文件：
  1. const formData = new FormData();
  2. formData.append('file', fileInput.files[0]);
  3. formData.append('name', 'my file');
  5. axios.post('/upload', formData, {
  6.   headers: {
  7.     'Content-Type': 'multipart/form-data'
  8.   }
  9. });
复制代码
七、总结

Axios作为当代前端开发中最流行的HTTP客户端之一，提供了简洁而强盛的API。通过本文的学习，你应该已经掌握了：

  • Axios的根本使用方法（GET、POST等哀求）
  • 高级特性（实例创建、拦截器、取消哀求等）
  • 与TypeScript的联合使用
  • 在现实项目中的最佳实践
  • 常见问题的解决方案
在现实开发中，合理使用Axios可以大大提高开发效率，同时保持代码的整洁和可维护性。发起根据项目需求对Axios举行得当封装，建立统一的哀求处置惩罚机制。

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

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

用多少眼泪才能让你相信

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表