深入浅出掌握 Axios(持续更新)

在了解ajax和axios之前，我们先观察一下他们是什么英文的缩写

ajax 的名字为 asynchroanous JavaScript and XML

而axios的名称来源于英文单词“axis”与“I/O”的结合，并非直接缩写自某个特定短语。

先导知识

在本文我们简单的介绍一下ajax后着重讲解axios，在平时工作中因为ajax配置较为底层，代码相对冗长，所以我们使用更为现代化的axios

Axios是一个基于Promise的HTTP客户端库，专为浏览器和Node.js设计。其优势包括：

• 简洁的API设计，支持Promise链式调用。
• 自动转换JSON数据，拦截请求和响应。
• 提供取消请求、超时控制等高级功能。

到底什么是基于promise？请看一下博主的上一篇文章Javascript异步代码处理-CSDN博客

我们在这里简单的介绍一下：Promise是JavaScript中用于处理异步操作的编程构造。它表示一个异步操作的最终完成（成功或失败）及其结果值。最重要的是理解异步操作。

还有一个重点需要了解的是HTTP请求，此知识在各大网站均可搜到浅谈HTTP中Get、Post、Put与Delete的区别_联想如何跳过联网-CSDN博客，先确保自己了解清楚后再开始axios的学习。

在传统的网页开发中，每次我们点击一个链接或按钮跳转到另一个页面时，浏览器会重新加载整个页面。这个过程会出现短暂的白屏现象（页面内容完全空白），这是因为浏览器正在等待从服务器加载新的页面内容。

为了改善这种用户体验，开发者通常会尝试优化网络传输速度，比如压缩资源文件、使用缓存、开启CDN等方式来减少白屏时间。但无论我们怎么优化网络传输，总还会有一个过程是“清空页面 → 加载新页面”，这就不可避免地会出现白屏。

另外，传统的网页更新方式也存在一个效率问题：哪怕只需要更改页面上的一小部分内容，也必须整个页面重新加载。这不仅浪费资源，也让用户等待的时间变长。

在构建现代web项目的时候，前端与后端之间亲密的数据交互是重要的核心环节。而我们就是采用AJAX技术来实现这种数据交互的过程的。虽然浏览器本身已经提供了XMLHttpRequest和fetch()等等方式，但是他们或多或少存在复杂，兼容性不一等等的问题。

于是我们采用一个更强大，更友好，更灵活的AJAX封装库--Axios

在开始之前我们先了解如何引入axios在我们的项目中

如果你用的是前端构建工具（如 Vite、Webpack、Vue CLI）：

npm install axios  或者 yarn add axios

CDN 引入（适合纯 HTML 页面）：

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

引入后，请你记住，我们引入axios的目的就是来实现异步请求的，异步就是异步，请求有很多种。

同步

在了解异步之前我们先学习一下什么是同步，我们并不举一些生活的例子，直接使用代码方面的解释什么是同步：代码按顺序一行一行执行，每一行都必须等上一行执行完成后才能继续执行下一行。

console.log('1');
console.log('2');
console.log('3');
代码输出结果只能是123，而不会是其他情况

异步

现在我们考虑一下异步，在异步模式中，某些操作不会立即完成（比如网络请求、定时器等），它们会先挂起或排队等待执行，程序会继续执行后面的代码，而不是等待异步操作完成。

console.log('开始模拟请求');

    setTimeout(()=>{

        console.log('请求中')

    },2000)

    console.log('请求已经发送');

考虑这段代码，按照我们初学者所想，输出结果就应该是 开始模拟请求->请求中->请求已经发送

但下面控制台输出结果并非如此。

关键就在于：setTimeout 是异步的。

• 当 JavaScript 执行到 setTimeout 时，它不会等里面的代码执行完再往下走。

• 它会将回调函数（console.log('请求中')）注册到“任务队列”中，然后继续执行后面的代码。

• 等到 定时器时间到了（这里是2秒），并且主线程空闲时，那个回调才会执行。

到这里我们已经理解了异步的核心思想

异步就是：你启动了一件任务，但不会等它完成才做下一件事。它不会“阻塞”后续代码的执行，而是“等你有空再处理这件事”。

Axios

上文讲到引入axios是完成异步请求的，我们异步已经搞明白了，现在我们来仔细分析一下请求

我们使用axios请求，其实是浏览器在背后通过HTTP协议向服务器发送请求并等待响应

包括以下两个核心部分：

请求(Request): 你告诉服务器我要什么

响应(Response)：服务器告诉你这是你要的内容

常见的请求类型（也叫“方法”）有这些：

我们现在用一个简单的文章小系统来了解Axios的基础用法(请注意我们不会把代码一股脑全考上来，也不会实打实就写代码，而是通过这个项目的流程来熟悉一下axios而已)

我们要构建一个简单的“文章管理系统”，包含以下功能：

•  获取文章列表

•  发布新文章

•  修改已有文章

•  删除文章

这些功能刚好对应 Axios 中最常用的四种请求方法：GET、POST、PUT、DELETE。

先说白了，get从哪里get，又post到哪里

• get 是从 服务器的某个接口（URL） 请求数据

• post 是把数据 发送到服务器的某个接口（URL）

而这个时候API接口文档就显得十分重要了

Restful API 接口规范详解-腾讯云开发者社区-腾讯云

我们可以使用 json-server 快速搭建本地 REST API

1. 安装 json-server

npm install -g json-server

 2. 创建模拟数据 db.json

在你的项目根目录创建一个文件：db.json

 3. 启动服务

json-server --watch db.json --port 3000

它会自动创建出一组 完整的 RESTful 接口：

4. 示例代码：使用 Axios 测试

axios.get('http://localhost:3000/posts') // 获取文章 axios.post('http://localhost:3000/posts', { title: '测试文章', content: '这是一个模拟添加的文章' });

Axios基本语法学习/复习

了解基本语法之前我们需要学习headers、params，也就是请求头和请求体的内容

语法形式（通用）

axios(config)
axios({
  method: 'get',       // 请求方法（get/post/put/delete）
  url: '/api/posts',   // 请求地址
  params: { id: 1 },   // URL 查询参数（自动拼接成 ?id=1）
  data: { title: '标题' }, // 请求体数据（POST/PUT 用）
  headers: { 'X-Custom': 'value' }, // 自定义请求头
  timeout: 5000        // 超时设置（单位毫秒）
})

各方法语法和参数

1. axios.get(url, config)

• url：请求地址

• config：配置对象（headers、params 等）

axios.get('/api/posts', {
  params: { id: 1 },
  headers: { Authorization: 'Bearer token' }
});

2. axios.post(url, data, config)

• url：请求地址

• data：请求体（body）内容

• config：附加配置

axios.post('/api/posts', {
  title: '新文章',
  content: '内容'
});

3. axios.put(url, data, config)

axios.put('/api/posts/1', {
  title: '修改标题'
});

4. axios.delete(url, config)

axios.delete('/api/posts/1');

5. axios.patch(url, data, config)

用于局部更新资源

axios.patch('/api/posts/1', {
  title: '只修改标题'
});

返回值：Axios 响应结构

Axios 所有请求都会返回一个 Promise，你可以用 .then() 处理返回值：

axios.get('/api/posts/1')
  .then(response => {
    console.log(response.data);       // 服务器返回的数据
    console.log(response.status);     // 状态码，如 200
    console.log(response.headers);    // 响应头
    console.log(response.config);     // 请求配置信息
  })
  .catch(error => {
    console.error(error.response);    // 错误响应对象
  });

Axios 特性汇总