Axios 库简介与核心功能详解

一、Axios的诞生

为什么会诞生Axios？说到Axios我们就不得不说下Ajax。最初的旧浏览器页面在向服务器请求数据时，由于返回的是整个页面的数据，所以整个页面都会强制刷新一下，这对于用户来讲并不是很友好。因为当我们只需要请求部分数据时，服务器返回给我们的确是整个页面的数据，如许会造成网络资源的占用，即十分消耗网络资源。为了提高数据请求服从，异步网络请求Ajax就应运而生了，它可以在页面无刷新的情况下请求数据。因此，如许一来，当我们只是需要修改页面的部分数据时，可以实现不刷新页面的功能。
二、Axios的先容

1.定义

• Axios是一个基于promise 的 HTTP 库（类似于jQuery的Ajax，用于HTTP请求），可以用在浏览器和 node.js中（既可以用于客户端也可以用于node.js编写的服务端）。
  

   
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
  2.原理

axios（ajax i/o system）不是一种新技术，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。
三、 什么是 Axios？

• 定义：Axios 是一个基于 Promise 的轻量级 HTTP 客户端，用于在浏览器和 Node.js 情况中发送 HTTP 请求（如 GET、POST、PUT、DELETE 等）。
  
• 核心特点：
  
  
  
  • 跨平台：同一套代码可在浏览器和 Node.js 中运行。
    
  • 基于 Promise：支持链式调用（.then()/.catch()）和 async/await 语法。
    
  • 简洁易用：提供统一的 API，简化异步请求的编写。
    
  • 拦截器：可拦截请求和相应，统一处理数据或错误。
    
  • 主动转换 JSON：默认将请求数据转换为 JSON 格式，相应数据主动剖析为 JavaScript 对象。
    
  
  

1.核心特性

(1) 支持所有 HTTP 方法

• 常用方法：
  
  
  
  • axios.get(url, config)：获取数据（GET 请求）。
    
  • axios.post(url, data, config)：提交数据（POST 请求）。
    
  • axios.put(url, data, config)：更新数据（PUT 请求）。
    
  • axios.delete(url, config)：删除数据（DELETE 请求）。
    
  • 其他：patch、head、options 等。
    
  
  

(2) 基于 Promise 的异步处理

使用 .then() 处理乐成，.catch() 捕获错误：

1. axios.get('/user?ID=12345')
2.   .then(response => {
3.     console.log('成功:', response.data);
4.   })
5.   .catch(error => {
6.     console.error('失败:', error);
7.   });

复制代码

(3) 请求和相应拦截器

• 请求拦截器：在请求发送前统一处理（如添加 Token、设置请求头）：
  

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

复制代码

• 相应拦截器：在相应返回后统一处理（如错误状态码、数据格式转换）：
  

1. axios.interceptors.response.use(response => {
2.   return response;
3. }, error => {
4.   if (error.response.status === 401) {
5.     // 处理未授权错误（如跳转登录页）
6.   }
7.   return Promise.reject(error);
8. });

复制代码

(4) 设置选项

• 全局设置（通过 axios.create() 创建实例）：
  

1. const instance = axios.create({
2.   baseURL: 'https://api.example.com', // 基础路径
3.   timeout: 5000, // 超时时间（毫秒）
4.   headers: { 'Content-Type': 'application/json' }
5. });

复制代码

• 局部设置（在请求时指定）：
  

1. axios.post('/user', {
2.   name: 'John',
3.   age: 30
4. }, {
5.   timeout: 3000,
6.   headers: { 'X-Custom-Header': 'value' }
7. });

复制代码

(5) 取消请求

• 使用 CancelToken 取消正在举行的请求：
  

1. const source = axios.CancelToken.source();
3. axios.get('/user', {
4.   cancelToken: source.token
5. });
7. // 取消请求
8. source.cancel('操作取消');

复制代码

(6) 主动处理 JSON 数据

• 请求数据：默认将 JavaScript 对象主动序列化为 JSON。
  
• 相应数据：主动将 JSON 相应剖析为 JavaScript 对象。
  

---

2.安装与引入

(1) 通过 npm/yarn 安装（适合项目开发）

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

复制代码

在代码中引入：

1. import axios from 'axios'; // ES6 模块
2. // 或
3. const axios = require('axios'); // CommonJS（Node.js）

复制代码

(2) 通过 CDN 引入（适合简单 HTML 页面）

1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

复制代码

3. 基本用法示例

(1) 发送 GET 请求

1. axios.get('/api/data', {
2.   params: { // URL 参数
3.     page: 1,
4.     limit: 10
5.   }
6. })
7. .then(response => {
8.   console.log('数据:', response.data);
9. });

复制代码

(2) 发送 POST 请求

1. axios.post('/api/submit', {
2.   name: 'Jane',
3.   email: 'jane@example.com'
4. })
5. .then(response => {
6.   console.log('提交成功:', response.data);
7. })
8. .catch(error => {
9.   console.error('提交失败:', error);
10. });

复制代码

(3) 使用 async/await

1. async function fetchData() {
2.   try {
3.     const response = await axios.get('/api/items');
4.     console.log('数据:', response.data);
5.   } catch (error) {
6.     console.error('请求失败:', error);
7.   }
8. }

复制代码

4.高级功能

(1) 处理文件上传

1. const file = document.querySelector('input[type="file"]').files[0];
2. const formData = new FormData();
3. formData.append('file', file);
5. axios.post('/api/upload', formData, {
6.   headers: { 'Content-Type': 'multipart/form-data' }
7. });

复制代码

(2) 并发请求

1. axios.all([
2.   axios.get('/api/users'),
3.   axios.get('/api/posts')
4. ])
5. .then(axios.spread((usersRes, postsRes) => {
6.   console.log('用户:', usersRes.data);
7.   console.log('帖子:', postsRes.data);
8. }));

复制代码

(3) 跨域请求（CORS）

• 后端需设置 CORS 头：
  1. Access-Control-Allow-Origin: *
  2. Access-Control-Allow-Methods: GET, POST, PUT, DELETE

  复制代码

---

5. 在 Vue 中的使用

(1) 全局设置

在 main.js 中：

1. import Vue from 'vue';
2. import axios from 'axios';
4. Vue.prototype.$axios = axios; // 将 axios 注入到 Vue 实例中
6. // 设置默认配置
7. axios.defaults.baseURL = 'https://api.example.com';

复制代码

(2) 在组件中使用

1. export default {
2.   methods: {
3.     async submitForm() {
4.       try {
5.         const response = await this.$axios.post('/login', {
6.           username: 'user',
7.           password: 'pass'
8.         });
9.         console.log('登录成功:', response.data);
10.       } catch (error) {
11.         console.error('登录失败:', error);
12.       }
13.     }
14.   }
15. };

复制代码

---

6. 常见题目

(1) 怎样处理 application/x-www-form-urlencoded 格式？

• 使用 qs 库（需额外安装 npm install qs）：
  1. import qs from 'qs';
  3. axios.post('/api/login', qs.stringify({
  4.   username: 'user',
  5.   password: 'pass'
  6. }), {
  7.   headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  8. });

  复制代码

(2) 怎样解决浏览器的 CORS 题目？

• 后端设置：添加允许的源和方法。
  
• 前端署理：在开发情况通过 vue.config.js 设置署理：
  1. module.exports = {
  2.   devServer: {
  3.     proxy: {
  4.       '/api': {
  5.         target: 'https://api.example.com',
  6.         changeOrigin: true,
  7.         pathRewrite: { '^/api': '' }
  8.       }
  9.     }
  10.   }
  11. };

  复制代码

---

7. 总结

Axios 是前端开发中 最常用的 HTTP 客户端库，因其简洁的 API、强大的功能（拦截器、Promise 支持）和跨平台特性而广受欢迎。把握 Axios 能够显著提升与后端 API 交互的服从，是每个前端开发者必备的技能之一。
如果需要更深入的示例或具体场景的实现，可以进一步提问！