使用 Axios 发送 HTTP 请求
使用 Axios 向 API 发送 GET 和 POST 请求
使用 Axios 发送 HTTP 请求 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
与接口通信
大多数实际应用都会通过 HTTP 从后端加载数据。虽然浏览器内置了 fetch，但许多 Vue 项目使用 Axios：它是一种流行的、基于 promise 的 HTTP 客户端，提供更友好的 API、自动 JSON 解析和强大的配置选项。
安装 Axios
使用包管理器将 Axios 添加到项目中，然后在需要的位置导入它。
npm install axios导入 Axios
导入默认导出，即可开始发送请求。
import axios from "axios"GET 请求
使用 axios.get 获取数据。它会返回一个 promise，该 promise 解析为响应对象；响应正文位于 response.data 中，并且已经从 JSON 解析完成。
axios.get("https://api.example.com/users")
.then(response => {
console.log(response.data)
})POST 请求
使用 axios.post 发送数据。第二个参数是请求正文，Axios 会自动将其序列化为 JSON。
axios.post("https://api.example.com/users", {
name: "Grace",
email: "grace@example.com"
})使用 async/await
使用 async/await 可以让 promise 更易读。将函数标记为 async，然后等待请求完成。
async function loadUsers() {
const response = await axios.get("/api/users")
return response.data
}在 Vue 方法中
一种常见模式是从组件方法中调用 Axios，并将结果存储在响应式数据中。
export default {
data() {
return { users: [] }
},
methods: {
async fetchUsers() {
const res = await axios.get("/api/users")
this.users = res.data
}
}
}请求配置：查询参数
传入 params 对象即可添加查询字符串参数。Axios 会为您构建 URL。
axios.get("/api/users", {
params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10请求配置：请求头
可以通过配置对象发送自定义请求头，例如授权令牌。
axios.get("/api/profile", {
headers: {
Authorization: "Bearer " + token
}
})基础 URL 配置
在各处重复完整 URL 容易出错。创建一个带有 baseURL 和共享默认设置的 Axios 实例，然后在整个应用中使用它。
import axios from "axios"
export const api = axios.create({
baseURL: "https://api.example.com",
timeout: 5000,
headers: { "Content-Type": "application/json" }
})
// elsewhere: api.get("/users")其他 HTTP 方法
Axios 支持常见的 HTTP 方法：get、post、put、patch 和 delete。请使用与要执行的操作相匹配的方法。
api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")快速检查
测试您对 Axios 请求的理解。
回顾
Axios 是一个基于 promise 的 HTTP 客户端。使用 get、post、put、patch 和 delete，通过配置对象传入 params 和 headers，并优先使用 async/await 以提高可读性。通过 axios.create 创建带有 baseURL 的共享实例，可以让请求保持 DRY。接下来，您将在组件生命周期的适当阶段获取数据。
常见问题解答
「使用 Axios 发送 HTTP 请求」课时是免费的吗？
是的 — 「使用 Axios 发送 HTTP 请求」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「使用 Axios 发送 HTTP 请求」这节课中我会学到什么？
使用 Axios 向 API 发送 GET 和 POST 请求 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「使用 Axios 发送 HTTP 请求」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 Axios 发送 HTTP 请求
- 生命周期钩子与数据获取
- 错误处理与全局拦截器