Skip to content

Promise

axios 基于原生 ES6 Promise API 构建。每个 axios 请求都返回一个 Promise,该 Promise 解析为响应对象或以错误拒绝。如果你的环境不支持 ES6 Promise,需要使用 polyfill,例如 es6-promise

then / catch / finally

由于 axios 返回的是标准 Promise,你可以使用 .then().catch().finally() 来处理结果:

js
axios.get("/api/users")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error("Request failed:", error.message);
  })
  .finally(() => {
    console.log("Request finished");
  });

async / await

大多数代码库推荐使用 async/await,它使异步代码读起来像同步代码:

js
async function fetchUser(id) {
  try {
    const response = await axios.get(`/api/users/${id}`);
    return response.data;
  } catch (error) {
    console.error("Failed to fetch user:", error.message);
    throw error;
  }
}

并行请求

由于 axios 返回标准 Promise,你可以使用 Promise.all 同时发起多个请求,并等待所有请求完成:

js
const [users, posts] = await Promise.all([
  axios.get("/api/users"),
  axios.get("/api/posts"),
]);

console.log(users.data, posts.data);

TIP

Promise.all 会在任何一个请求失败时立即 reject。如果你希望处理部分失败的情况,请改用 Promise.allSettled

js
const results = await Promise.allSettled([
  axios.get("/api/users"),
  axios.get("/api/posts"),
]);

results.forEach((result) => {
  if (result.status === "fulfilled") {
    console.log(result.value.data);
  } else {
    console.error("Request failed:", result.reason.message);
  }
});

链式请求

可以链式调用 .then() 来顺序执行请求,将上一个请求的数据传递给下一个:

js
axios.get("/api/user/1")
  .then(({ data: user }) => axios.get(`/api/posts?userId=${user.id}`))
  .then(({ data: posts }) => {
    console.log("Posts for user:", posts);
  })
  .catch(console.error);

axios is provided under MIT license