Axios 库简介与核心功能详解

本文链接：https://blog.csdn.net/2301_79940491/article/details/147429483

一、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() 捕获错误：

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

(3) 请求和响应拦截器

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

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

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

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

(4) 配置选项

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

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

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

axios.post('/user', {
  name: 'John',
  age: 30
}, {
  timeout: 3000,
  headers: { 'X-Custom-Header': 'value' }
});

(5) 取消请求

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

const source = axios.CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
});

// 取消请求
source.cancel('操作取消');

(6) 自动处理 JSON 数据

请求数据：默认将 JavaScript 对象自动序列化为 JSON。
响应数据：自动将 JSON 响应解析为 JavaScript 对象。

2.安装与引入

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

npm install axios        # 或
yarn add axios

在代码中引入：

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

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

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

3. 基本用法示例

(1) 发送 GET 请求

axios.get('/api/data', {
  params: { // URL 参数
    page: 1,
    limit: 10
  }
})
.then(response => {
  console.log('数据:', response.data);
});

(2) 发送 POST 请求

axios.post('/api/submit', {
  name: 'Jane',
  email: 'jane@example.com'
})
.then(response => {
  console.log('提交成功:', response.data);
})
.catch(error => {
  console.error('提交失败:', error);
});

(3) 使用 async/await

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

4.高级功能

(1) 处理文件上传

const file = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();
formData.append('file', file);

axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

(2) 并发请求

axios.all([
  axios.get('/api/users'),
  axios.get('/api/posts')
])
.then(axios.spread((usersRes, postsRes) => {
  console.log('用户:', usersRes.data);
  console.log('帖子:', postsRes.data);
}));

(3) 跨域请求（CORS）

后端需配置 CORS 头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

5. 在 Vue 中的使用

(1) 全局配置

在 main.js 中：

import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$axios = axios; // 将 axios 注入到 Vue 实例中

// 设置默认配置
axios.defaults.baseURL = 'https://api.example.com';

(2) 在组件中使用

export default {
  methods: {
    async submitForm() {
      try {
        const response = await this.$axios.post('/login', {
          username: 'user',
          password: 'pass'
        });
        console.log('登录成功:', response.data);
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
};

6. 常见问题

(1) 如何处理 `application/x-www-form-urlencoded` 格式？

使用 qs 库（需额外安装 npm install qs）：

import qs from 'qs';

axios.post('/api/login', qs.stringify({
  username: 'user',
  password: 'pass'
}), {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

(2) 如何解决浏览器的 CORS 问题？

后端配置：添加允许的源和方法。

前端代理：在开发环境通过 vue.config.js 配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};