大家好!我是方才,目前是8人后端研发团队的负责人,拥有6年后端经验&3年团队管理经验。
系统学习践行者!近期在系统化输出前端入门相关技术文章,期望能帮大家构建一个完整的知识体系。
如果对你有所帮助,记得一键三连!
我创建了一个编程学习交流群(扫码关注后即可加入),秉持“一群人可以走得更远”的理念,期待与你一起 From Zero To Hero!
茫茫人海,遇见即是缘分!方才兄送你ElasticSearch系列知识图谱、前端入门系列知识图谱、系统架构师备考资料!
一文掌握Axios
ps:学习
Axios
需要了解最基本的HTTP知识,至少需要知晓GET/POST/PUT/DELETE
等方法的基本使用;同时也需要了解json
的基本知识,知晓json
数据的基本格式。
能解决的问题
你写了一个很棒的**前端项目,一切顺利运行,直到你需要和后端进行数据交互时。**此时,前端的页面和后端的服务器就像是两个相隔千里的邻居,彼此之间的沟通仿佛隔着一道厚墙。你想要的数据请求和响应总是有点“卡壳”,问题重重。这时,Axios
就成了你解决问题的利器。是不是心里在想,怎么就这么巧,今天的文章正好讲这个?
今天,我们就来一起探索如何用 Axios
轻松搞定前端与后端的数据交互,且从此告别“数据请求卡壳”的困扰。
在本篇文章中,我们将系统地介绍 Axios
,让你全面了解它的核心概念、基本用法及高级技巧。你将学到如何发送 GET 请求、POST 请求、处理请求和响应拦截器、处理错误等。最重要的是,我们将通过一系列简单易懂的示例,让你快速掌握如何将 Axios
与 Vue
框架结合使用,实现高效的数据请求和处理。
什么是 Axios
?
Axios
是一个基于 Promise 的 HTTP 库,主要用于浏览器和 Node.js 中发送 HTTP 请求。你可以用它发送各种类型的请求(如 GET、POST、PUT、DELETE 等),并且能够轻松地处理请求和响应的数据。简单来说,它让前端和后端的“对话”变得简单且流畅。
安装 Axios
首先,打开你的项目终端,使用 npm 或 yarn 安装 Axios
:
npm install axios
# 或者
yarn add axios
安装完成后,你就可以在vue
项目中引入并使用 Axios
了。
请求示例
发送一个 GET 请求
让我们先来看一个简单的 GET 请求示例。假设我们需要获取一个用户列表:
import axios from 'axios';
axios.get('https://api.example.com/users')
.then(response => {
console.log('用户列表:', response.data);
})
.catch(error => {
console.error('请求出错:', error);
});
这里的 get
方法发出了一个 GET 请求,访问 https://api.example.com/users
,然后通过 .then()
获取成功的响应数据,通过 .catch()
处理请求错误。
发送一个 POST 请求
接下来,我们来发送一个 POST 请求,提交一个新的用户数据:
import axios from 'axios';
const newUser = {
name: '方才兄',
age: 30,
};
axios.post('https://api.example.com/users', newUser)
.then(response => {
console.log('创建成功:', response.data);
})
.catch(error => {
console.error('创建失败:', error);
});
在这里,我们通过 axios.post
发送了一个包含新用户数据的请求。如果请求成功,控制台会打印出响应数据;如果失败,控制台会打印出错误信息。
请求和响应拦截器
有时候,我们需要对请求和响应做一些统一的处理,比如添加请求头、统一处理错误等。Axios
提供了请求拦截器和响应拦截器来帮助我们做这些事情。
请求拦截器
请求拦截器通常用来修改请求,例如添加认证 token、设置自定义请求头等:
axios.interceptors.request.use(config => {
// 在请求发送之前做些什么
config.headers['Authorization'] = 'Bearer your-token';
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
响应拦截器
响应拦截器通常用来处理响应数据或错误,例如统一处理错误信息:
axios.interceptors.response.use(response => {
// 对响应数据做些什么
return response;
}, error => {
// 对响应错误做些什么
console.error('响应错误:', error.response.data);
return Promise.reject(error);
});
错误处理
在实际开发中,网络请求总是不可避免地会遇到各种错误。例如,服务器错误、网络断开、请求超时等。Axios
为我们提供了灵活的错误处理机制。
axios.get('https://api.example.com/users')
.then(response => {
console.log('用户列表:', response.data);
})
.catch(error => {
if (error.response) {
// 服务器响应错误
console.error('响应错误:', error.response.data);
} else if (error.request) {
// 请求未发送
console.error('请求未发送:', error.request);
} else {
// 其他错误
console.error('其他错误:', error.message);
}
});
通过判断 error.response
、error.request
和 error.message
,我们可以更精细地捕获和处理不同类型的错误。
vue
中的工具类封装
我们在vue
项目中,通常会统一封装工具类,更加方便在其他文件中的使用。
封装axiosInst.js
import axios from 'axios';
// 创建一个Axios实例
const axiosInst = axios.create({
baseURL: import.meta.env.VITE_API_URL+import.meta.env.VITE_API_PATH, //.env中的VITE_APP_API参数
timeout: 1000, // 请求超时时间(毫秒)
headers: {
'Content-Type': 'application/json', // 设置默认的Content-Type
},
});
// 封装 GET 请求
const get = (url, params = {}, config = {}) => {
return axiosInst.get(url, {
params,
...config,
});
};
// 封装 POST 请求
const post = (url, data = {}, config = {}) => {
return axiosInst.post(url, data, config);
};
// 封装 PUT 请求
const put = (url, data = {}, config = {}) => {
return axiosInst.put(url, data, config);
};
// 封装 DELETE 请求
const del = (url, params = {}, config = {}) => {
return axiosInst.delete(url, {
params,
...config,
});
};
// 请求拦截器
axiosInst.interceptors.request.use(
(config) => {
console.debug("interceptors.request start!")
// 在发送请求之前做些什么,比如给请求头添加Token
const token = localStorage.getItem('token'); // 从本地存储中获取token
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(error) => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
axiosInst.interceptors.response.use(
(response) => {
console.debug("interceptors.response start!")
// 统一处理响应数据,例如解析响应结构
if (response.data.code === 200) {
return response.data.data;
} else {
// 可以根据具体的业务需求处理非200的情况
return Promise.reject(response.data.message);
}
},
(error) => {
// 统一处理响应错误
let message = '';
if (error.response) {
// 请求已经发出,但是服务器响应一个状态码非 2xx 的范围
switch (error.response.status) {
case 400:
message = '请求错误';
break;
case 401:
message = '未授权,请重新登录';
break;
case 403:
message = '拒绝访问';
break;
case 404:
message = '请求地址出错';
break;
case 500:
message = '服务器内部错误';
break;
default:
message = `连接错误 ${error.response.status}`;
}
} else {
// 处理断网的情况
if (!window.navigator.onLine) {
message = '网络已断开';
} else {
message = '请求失败,请稍后重试';
}
}
// 可以在这里显示错误提示信息
console.error(message);
return Promise.reject(error);
}
);
export default {
axiosInst,
get,
post,
put,
del,
};
在vue
中使用
- 按业务类型封装,比如说博客文章相关的
articleApi.js
- 以下示例,包括了对
GET/POST/PUT/DELETE
方法的封装
- 以下示例,包括了对
import axiosInst from "./axiosInst.js";
/**
* 增删改查
*/
const pagePublicArticle = (pageReq = {}) => {
return axiosInst.post("/article/public/page", pageReq);
}
const getArticle = (id) => {
return axiosInst.get("/article/" + id);
}
const addArticle = (articleSaveReq = {}) => {
return axiosInst.post("/article", articleSaveReq);
}
const editArticle = (articleSaveReq = {}) => {
return axiosInst.put("/article", articleSaveReq);
}
const deleteArticle = (id) => {
return axiosInst.del("/article/" + id);
}
export default {
pageArticle,
getArticle,
addArticle,
editArticle,
deleteArticle
}
- 以方才coding博客的搜索功能为例:在
vue
文件中使用articleApi.js
<script setup>
// 查询结果的容器
const searchResults = ref([]);
const performSearch = async () => {
const trimmedQuery = searchStr.value.trim();
if (!trimmedQuery) {
searchResults.value = [];
return;
}
// 调用后端api,获取查询结果
const pagePublicArticle = await articleApi.pagePublicArticle({
page: 1,
pageSize: 50,
title: trimmedQuery
});
// 将接口的响应报文赋值给容器
searchResults.value = pagePublicArticle.records;
};
</script>
- 用户交互效果:
axios
和 Promise
对比
axios 和 Promise 是两个不同层面的工具。Promise 是 JavaScript 内置的用于处理异步操作的对象,而 axios 是一个基于 Promise 的 HTTP 客户端库。它可以帮助我们更简单、更便捷地发送 HTTP 请求,并自动管理返回的 Promise 对象。接下来,我们详细对比 Promise 和 axios 的特点与用法。
axios 和 Promise 的关系
axios 是基于 Promise 实现的,也就是说 axios 请求返回的是一个 Promise 对象。axios 封装了 XMLHttpRequest,能够简化处理 HTTP 请求,减少手动处理 Promise 相关逻辑的繁琐代码。
Promise 和 axios 的主要区别
功能 | Promise | axios |
---|---|---|
作用 | 管理异步操作 | 基于 Promise 封装的 HTTP 请求库 |
使用场景 | 任何异步逻辑(如文件读取、定时器等) | 主要用于发送 HTTP 请求,常见于 API 调用 |
返回值 | 提供 then 、catch 、finally 方法 | 返回一个 Promise,可以直接调用这些方法 |
异常处理 | 通过 catch 方法捕获 | 内置错误拦截器,可根据 HTTP 状态码处理不同错误 |
扩展性 | 需要手动封装,灵活性高 | 内置多种配置项,如请求头、超时时间、拦截器等 |
Promise 的使用示例
如果不使用 axios,而是手动用 fetch 或其他 API 发起请求,代码可能会略显复杂。以下是一个使用 Promise 的 HTTP 请求示例:
// 使用 fetch 和 Promise
function getUserData(userId) {
return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log(data); // 成功时的数据
return data;
})
.catch((error) => {
console.error("请求失败:", error.message); // 捕获错误
});
}
getUserData(1);
在这个例子中,我们用 fetch 发起请求,返回的也是一个 Promise,并通过 .then()
和 .catch()
来处理成功和失败的情况。
axios 的主要功能与优势
自动解析响应数据:axios 会自动解析 JSON 响应,而使用 fetch 需要手动调用 response.json()
。
请求/响应拦截器:可以在请求发送前或响应接收后进行统一处理。例如,添加认证头或错误处理。
axios.interceptors.request.use(
(config) => {
config.headers.Authorization = "Bearer token";
return config;
},
(error) => Promise.reject(error)
);
取消请求:axios 支持取消请求,尤其在复杂的应用中(如 React、Vue 项目),避免不必要的请求。 更好的错误处理:axios 能根据不同的 HTTP 状态码自动分类错误,使得错误处理更清晰。
配置方便:可以在实例化 axios 时设置默认配置,例如基 URL、超时时间、头信息等。
请求数据格式化:自动将请求参数格式化为查询字符串,或在 POST 请求时自动序列化 JSON 数据。
总结
- 灵活性:Promise 是一个通用的异步操作管理工具,而 axios 是专门针对 HTTP 请求封装的库。使用 axios 可以减少异步 HTTP 请求时的代码量和复杂性。
- 自动化处理:axios 提供请求和响应拦截器、错误处理、自动 JSON 解析等功能,适合对 HTTP 请求有大量需求的项目。
- 简单上手:使用 axios 发起请求更简单,可以直接获得解析后的数据并处理错误,而不需要额外的代码。
axios 让基于 Promise 的 HTTP 请求更强大和便捷,在实际开发中是非常常用的选择。如果项目中大量依赖 API 请求,axios 可以大大简化代码,提高开发效率。
总结扩展
在本文中,我们已经全面介绍了 Axios
的基本使用,包括如何发送请求、处理响应、配置拦截器、处理错误等。通过本篇教程,你应该能够轻松掌握 Axios
,并将它应用于自己的项目中。
接下来,你可以进一步深入学习 Axios
的更多高级特性,比如取消请求、并行请求、请求超时控制等。Axios
是一个非常强大的工具,它能够帮助你轻松应对前端与后端之间的数据交互。
记住,编程之路不止一步,方才兄始终陪伴着你,带你一起走得更远。希望你能在使用 Axios
时游刃有余,处理数据请求时如鱼得水,打破那道厚厚的“隔墙”!
希望今天的分享对你有所帮助!别忘了,前端之路,方才兄与你同行!---
近期更新计划
近期更新计划(有需要的小伙伴,记得点赞关注哟!)
- 输出
vue、router、elementplus
等前端框架技术文章,期望能帮助大家快速建立相关的知识体系;- 基于vue3+springboot3的前后端分离的博客系统已经开源啦,欢迎大家star!gitee.com/fangcaicodi…
“学编程,一定要系统化”——若你也是系统学习的践行者,记得点赞关注,期待与你一起 From Zero To Hero!