(九）axios的使用
1、axios 的基本使用
1.1、简介
在 Web 开发的演进历程中，数据请求方式的变革至关重要。回溯早期，旧浏览器在向服务器请求数据时，存在严重弊端。由于返回的是整个页面数据，每次请求都会导致页面强制刷新，这不仅极大地影响了用户体验，还造成了网络资源的极大浪费。毕竟，多数情况下我们仅仅需要更新页面的部分内容，因此，异步网络请求技术应运而生，Ajax 便是其中的典型代表。
Ajax(Asynchronous JavaScript and XML)：作为异步网络请求的先驱，它实现了页面无刷新请求数据的功能，让网页能够在不重新加载整个页面的情况下与服务器进行数据交互。不过，实现 ajax 的方式虽多，但各有优劣。原生的 XMLHttpRequest 虽能实现基本的异步请求，但配置和调用方式极为繁琐，开发者需要编写大量复杂的代码来处理各种细节，如创建请求对象、设置请求头、处理响应等，这使得实现异步请求变得十分困难。
而 jQuery 的 ajax 方法极大地简化了这一过程，它提供了简洁易用的接口，让开发者能够轻松地进行异步请求。然而，引入整个 jQuery 框架只为使用 ajax 功能，无疑会增加项目的体积和复杂度，这在追求高效和轻量化的现代 Web 开发中并非最佳选择。
Axios（ajax i/o system）：它本质上是对原生 XMLHttpRequest 的封装，却为开发者带来了全新的体验。它可同时应用于浏览器和 nodejs 的 HTTP 客户端，基于 Promise 的特性使其完美符合最新的 ES 规范。这意味着在使用 axios 时，开发者可以利用 Promise 的链式调用和简洁的错误处理机制，让异步代码的编写更加优雅和高效。
axios 具备以下显著特点：
- 在浏览器中创建 XMLHttpRequest 请求：在实际的电商项目中，商品详情页往往需要展示商品的详细信息、用户评价等。使用 axios，开发者可以轻松地向服务器发送请求，获取这些数据，并在不刷新页面的情况下动态更新页面内容，为用户提供流畅的浏览体验。
- 在 node.js 中发送 http 请求：以 Node.js 搭建的后端服务为例，当需要调用其他 API 接口获取数据时，axios 提供了简单便捷的方式。比如，在一个内容管理系统的后端，需要从第三方的图片存储服务获取图片信息，axios 就能派上用场。
- 支持 Promise API：在涉及多个异步请求的场景中，axios 对 Promise API 的支持尤为强大。例如，在一个社交应用中，需要同时获取用户的基本信息、好友列表和动态消息，通过 Promise.all () 方法结合 axios，就可以并行处理这些请求，大大提高了数据获取的效率。
- 拦截请求和响应：在许多需要用户认证的应用中，请求拦截器可以在请求发送前检查用户是否登录，并在请求头中添加认证信息，确保请求的安全性。而响应拦截器则可以在接收到响应后，对数据进行统一的格式转换或错误处理。
- 转换请求和响应数据：当服务器返回的数据格式不符合前端需求时，响应拦截器可以对数据进行格式转换。比如，服务器返回的时间格式是时间戳，而前端需要展示成具体的日期时间格式，就可以在响应拦截器中进行转换。
- 取消请求：在搜索功能中，用户可能会频繁输入关键词，导致多次发送请求。此时，使用 axios 的取消请求功能，可以取消之前未完成的请求，避免资源浪费，提高应用的性能。
- 自动转换 JSON 数据：在前后端数据交互中，JSON 是最常用的数据格式之一。axios 能够自动处理 JSON 数据的解析和序列化，无需开发者手动操作，大大提高了开发效率。
1.2、安装
1.2.1、通过 cdn 引入
这种方式的优势在于简单快捷，无需进行复杂的安装和配置步骤。对于一些小型项目或快速原型开发来说，直接通过 CDN 引入 axios，可以迅速开始使用其功能。例如，在一个简单的个人博客页面中，想要实现文章数据的动态加载，使用 CDN 引入 axios，就能快速完成数据请求和展示的功能。
1.3、基本使用
1.3.1、准备服务器
在模拟服务器时，json-server 是一个非常实用的工具。
- 安装 json-server：
npm install -g json-server
通过全局安装 json-server，我们可以在任何项目中方便地使用它。安装完成后，在命令行中就可以直接调用 json-server 命令来启动服务器。
- 创建数据源：
在空文件夹下创建 JSON 文件作为数据源，例如db.json，示例数据如下：
{
"list": [
{
"id": "1",
"name": "唐僧",
"age": 20,
"address": "东土大唐"
},
{
"id": "2",
"name": "孙悟空",
"age": 500,
"address": "花果山"
},
{
"id": "3",
"name": "猪八戒",
"age": 330,
"address": "高老庄"
},
{
"id": "4",
"name": "沙悟净",
"age": 200,
"address": "流沙河"
},
{
"id": "5",
"name": "红孩儿",
"age": 10,
"address": "火焰山"
}
]
}
这个数据源可以用于模拟各种数据请求场景，比如在一个角色管理系统中，我们可以通过修改db.json中的数据，来模拟不同角色的数据变化，进而测试前端页面的数据展示和交互功能。
- 启动服务器：
有多种启动方式，每种方式都有其特点和适用场景。- 方式一：
json-server db.json
这是最基本的启动方式，简单直接，适用于快速启动服务器进行初步测试。
- 方式二：
json-server --watch db.json
--watch参数的作用非常强大，它可以实时监控文件的变化。当db.json中的数据发生修改时，服务器会自动检测到并更新数据，无需手动重启服务器。这在开发过程中频繁修改数据时非常方便，大大提高了开发效率。
- 方式三：
在与db.json同级目录创建package.json文件，配置别名：
{
"scripts":{
"mock":"json-server --watch db.json --port 3001"
}
}
然后通过npm run mock启动。这种方式在团队开发中尤为重要，它可以统一项目的启动命令，减少因启动方式不一致而导致的问题。同时，通过配置--port参数，可以指定服务器运行的端口，避免端口冲突。
1.3.2、各种请求方式
1.3.2.1、get 请求
get 请求主要用于获取数据，请求指定的信息并返回实体对象。在下面的示例中，展示了三种处理请求结果的方法，其中推荐使用try...catch方式，因为它的代码结构更加清晰，错误处理更加直观。
Document
此外，get 请求还可以携带参数，有以下两种常见方式：
// get请求带参数方式一
// try {
// let res = await axios.get("http://localhost:3000/list?id=1");
// render(res.data);
// } catch (error) {
// console.log(err);
// }
// get请求带参数方式二
try {
let res = await axios.get("http://localhost:3000/list", {
params: {
id: 2,
},
});
render(res.data);
} catch (error) {
console.log(err);
}
在实际应用中，比如在一个商品查询功能中，我们可以通过传递不同的参数，获取不同商品的详细信息。
1.3.2.2、post 请求：
post 请求通常用于向指定资源提交数据，如表单提交或文件上传。在下面的示例中，通过axios.post方法提交数据，提交后重新获取数据并渲染，展示了如何在实际应用中使用 post 请求进行数据添加操作。
Document
在一个用户注册功能中，就可以通过 post 请求将用户填写的注册信息提交到服务器，实现用户注册的功能。
1.3.2.3、put 请求：
put 请求用于更新数据，从客户端向服务器传送的数据会取代指定文档的内容。需要特别注意的是，put 请求会把更新的数据完全替代原数据，如果只修改了部分数据，原数据其他内容都会丢失。
Document
在一个用户信息修改功能中，如果使用 put 请求，一定要确保提交的数据完整，否则可能会导致部分数据丢失。
1.3.2.4、patch 请求：
patch 请求也是用于更新数据，它是对 put 方法的补充，主要用于对已知资源进行局部更新。
Document
在一个商品库存更新功能中，我们可能只需要更新库存数量，而不影响其他商品信息，这时使用 patch 请求就非常合适。
1.3.2.5、delete 请求：
delete 请求用于请求服务器删除指定的数据。
Document
1.3.3、axios 的配置
配置的优先级为：请求配置 > 实例配置 > 全局配置，这种优先级设置让开发者能灵活地根据不同场景对 axios 请求进行配置 。
- 全局配置：通过
axios.defaults进行全局配置，这些配置会应用到所有的 axios 请求中。
Document
在一个多页面应用中，可能所有页面的请求都需要设置相同的超时时间和基本 URL，使用全局配置就能很方便地实现这一点，避免在每个请求中重复设置。
- 实例配置：在大型项目中，不同的业务模块可能有不同的请求配置需求，为避免冲突，可创建 axios 的实例并进行配置。
Document
例如，一个电商项目中，商品相关的请求和用户相关的请求可能需要不同的超时时间或请求头设置，通过创建不同的实例就可以分别进行配置，互不干扰。
axios 实例常用配置：
-
baseURL：请求的域名，基本地址，类型：String，用于设置请求的基础路径。在前后端分离的项目中，根据不同的环境（开发、测试、生产）设置不同的
baseURL，方便切换不同环境的接口地址。 -
timeout：请求超时时长，单位 ms，类型：Number，用于设置请求的超时时间。在网络不稳定的情况下，合理设置超时时间可避免请求长时间等待，提升用户体验。
-
url：请求路径，类型：String，用于设置具体的请求路径。根据不同的业务需求，设置不同的请求路径，如获取用户信息的路径为
/user，获取订单信息的路径为/order。 -
method：请求方法，类型：String，如
GET、POST、PUT、PATCH、DELETE等。根据不同的业务操作，选择合适的请求方法，如获取数据用GET，提交数据用POST。 -
headers：设置请求头，类型：Object，用于设置请求的头部信息。比如在请求头中添加
Content-Type，指定请求体的数据格式，或者添加认证信息。 -
params：请求参数，将参数拼接在 URL 上，类型：Object，用于传递查询参数。在搜索功能中，可通过
params传递搜索关键词。 -
data：请求参数，将参数放到请求体中，类型：Object，用于传递请求体数据。在提交表单数据时，可将表单数据放在
data中。 -
请求配置：可以在单个请求中进行配置，这种方式可以针对特定请求进行个性化配置，覆盖全局配置和实例配置。
Document
比如在一个需要快速获取数据的场景中，可单独设置某个请求的超时时间为更短的值，以满足特定的业务需求。
1.3.4、axios 的拦截器
axios 提供了两大类拦截器，分别是请求方向的拦截（成功请求，失败请求）和响应方向的拦截（成功的，失败的）。拦截器在网络请求过程中扮演着非常重要的角色，它可以在发起请求或者响应时对操作进行处理。
- 请求拦截器：在发送请求前进行一系列处理。
Document
在一个需要用户登录才能访问某些功能的应用中，可在请求拦截器中检查用户是否登录，未登录则跳转到登录页面；还可以在请求头中添加一些通用的参数，如版本号、设备信息等。
- 响应拦截器：在接收到响应后进行一系列处理。
Document
在一个返回数据需要格式化的场景中，可在响应拦截器中对数据进行格式化处理；或者根据响应状态码进行统一的错误提示，如 404 提示页面未找到，500 提示服务器错误等。
- 取消拦截：可以取消拦截器。
Document
在某些特殊的测试场景中，或者临时需要绕过某些拦截器的处理时，可以使用取消拦截功能 。
2、Vue 中 axios 的使用
2.1、基本使用
- npm 安装：在终端使用
npm install axios安装 axios，这是在 Vue 项目中使用 axios 的常见方式。安装完成后，axios 会被添加到项目的node_modules目录中，项目可以引入并使用它。 - ** 在 Vue 原型上配置：在项目的文件中引入，并将其挂载到原型上，这样在组件中就可以通过axios` 来使用 axios。
// 导入axios
import axios from 'axios'
// 将axios放到Vue原型上，这样vm，vc身上就都有axios了
Vue.prototype.$axios=axios
通过这种方式，在 Vue 组件中可以方便地调用 axios 进行数据请求，无需在每个组件中重复引入 axios。
- 在组件中使用：在组件中通过
this.$axios发送请求。
在一个商品列表组件中，可通过点击按钮，使用this.$axios获取商品列表数据并展示在页面上。
2.2、一次封装
如果多个组件都需要发送请求，且每次请求前都要进行一些验证处理等，可以进行简单封装。
- 封装 request.js：在
src/utils创建request.js，创建 axios 实例并进行配置，添加请求拦截器和响应拦截器。
/* 封装axios用于发送请求 */
import axios from "axios";
/*
(1)request 相当于 Axios 的实例对象
(2)为什么要有request,而不是直接用axios
* 项目开发中，有可能会有两个基地址
* 不同的接口配置不同（有的要token,有的不要token）
*/
const request = axios.create({
baseURL: "http://localhost:3000", // 设置基地址
timeout: 2000, // 请求超时：当2s没有响应就会结束请求
});
// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
request.interceptors.request.use(
function (config) {
// 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
// 例如1
config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换
// 例如2
config.headers = {
"Content-Type": "application/x-www-form-urlencoded", // 配置请求头
};
// 例如3
//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
const token = getCookie("名称"); // 这里取token之前，你肯定需要先拿到token,存一下
if (token) {
config.params = { token: token }; // 如果要求携带在参数中
config.headers.token = token; // 如果要求携带在请求头中
}
return config; //拦截后的放行
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么
console.log('关闭请求数据动画');
console.log('对数据进行处理');
return response.data; //只要响应对象中的数据
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default request;
在一个需要用户登录的应用中，可在请求拦截器中统一处理 token 验证，确保每个请求都携带有效的认证信息；在响应拦截器中统一处理错误提示，根据不同的错误类型给用户友好的提示。
- 组件中使用：在组件中引入封装后的
request。
在一个用户管理组件中，可通过引入request，方便地发送获取用户列表、添加用户、修改用户等请求，并且无需重复编写请求拦截和响应处理的代码。
2.3、二次封装
项目中页面较多，每个页面多次请求时，将请求写在页面中难以维护，可再次进行封装。
- src/apis/showList.js：导入一次封装的
request，封装具体的请求函数。
// 导入一次封装的request
import request from "@/utils/request";
// 请求list数据
export function getListInfo1() {
return request.get("/list");
}
// 请求user数据
export function getUserInfo1() {
return request.get("/user");
}
在一个电商项目中，可在src/apis目录下创建多个文件，分别封装商品、订单、用户等相关的请求函数，使代码结构更加清晰，便于维护和管理。
- showList.vue：在组件中引入封装后的请求函数。
在一个商品列表页面中，可通过调用getListInfo1获取商品列表数据，在用户详情页面中，可通过调用getUserInfo1获取用户详情数据，进一步提高代码的复用性和可维护性。
3、axios 小案例
3.1、表格的添加
在实际项目中，表格添加功能通常涉及到数据的提交和更新。使用 axios 发送 post 请求，将用户输入的数据提交到服务器，服务器处理后返回新的数据列表，再通过 axios 获取最新数据并重新渲染表格，展示添加后的数据。在一个员工管理系统中，可通过表格添加功能，添加新员工的信息，提交后刷新表格，展示最新的员工列表。用户在前端界面填写新员工的姓名、年龄、职位等信息，点击提交按钮后，axios 将数据发送到服务器，服务器将数据保存到数据库并返回更新后的员工列表数据，前端接收到数据后重新渲染表格，让用户看到最新的员工信息。
3.2、天气案例
在天气案例中，通过 axios 向天气 API 发送 get 请求，获取城市的天气信息，如温度、湿度、天气状况等。可以根据不同的天气状况展示相应的图标和提示信息，为用户提供直观的天气展示。同时，可以设置缓存机制，避免频繁请求 API，提高用户体验。比如在一个天气预报应用中，可根据获取的天气状况，展示对应的晴天、雨天、多云等图标，同时设置缓存，在一定时间内不再重复请求相同城市的天气数据。当用户打开应用时，axios 向天气 API 发送请求获取当前城市的天气信息，将温度、湿度等数据展示在页面上，并根据天气状况展示对应的图标。如果用户在短时间内多次打开应用，应用会先检查缓存中是否有最新的天气数据，如果有则直接展示，避免重复请求 API，减少网络流量和提高响应速度。