axios

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Axios HTTP Client

Axios is a promise-based HTTP client for the browser and Node.js. It provides a simple API for making HTTP requests and handling responses.

Axios是一款基于Promise的HTTP客户端，适用于浏览器和Node.js环境。它提供了简洁的API用于发起HTTP请求和处理响应。

Quick Start

快速开始

Basic GET Request

基础GET请求

javascript

import axios from "axios";

// Promise-based
axios
  .get("/user?ID=12345")
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

// Async/await
async function getUser() {
  try {
    const response = await axios.get("/user?ID=12345");
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

javascript

import axios from "axios";

// Promise方式
axios
  .get("/user?ID=12345")
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

// Async/await方式
async function getUser() {
  try {
    const response = await axios.get("/user?ID=12345");
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

Basic POST Request

基础POST请求

javascript

axios
  .post("/user", {
    firstName: "John",
    lastName: "Doe",
  })
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

javascript

axios
  .post("/user", {
    firstName: "John",
    lastName: "Doe",
  })
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

Common Patterns

常见使用模式

Custom Instance

自定义实例

javascript

const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

// Use the instance
api.get("/users").then((response) => console.log(response.data));

javascript

const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

// 使用该实例
api.get("/users").then((response) => console.log(response.data));

Request with Configuration

带配置的请求

javascript

axios({
  method: "post",
  url: "/user/12345",
  data: {
    firstName: "Fred",
    lastName: "Flintstone",
  },
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer token",
  },
});

javascript

axios({
  method: "post",
  url: "/user/12345",
  data: {
    firstName: "Fred",
    lastName: "Flintstone",
  },
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer token",
  },
});

Concurrent Requests

并发请求

javascript

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

Promise.all([getUserAccount(), getUserPermissions()]).then(
  ([account, permissions]) => {
    console.log("Account:", account.data);
    console.log("Permissions:", permissions.data);
  },
);

javascript

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

Promise.all([getUserAccount(), getUserPermissions()]).then(
  ([account, permissions]) => {
    console.log("Account:", account.data);
    console.log("Permissions:", permissions.data);
  },
);

Error Handling

错误处理

Basic Error Handling

基础错误处理

javascript

axios.get("/user/12345").catch(function (error) {
  if (error.response) {
    // Server responded with error status
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // Request was made but no response received
    console.log(error.request);
  } else {
    // Error in request setup
    console.log("Error", error.message);
  }
});

javascript

axios.get("/user/12345").catch(function (error) {
  if (error.response) {
    // 服务器返回错误状态码
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已发出但未收到响应
    console.log(error.request);
  } else {
    // 请求设置过程中出错
    console.log("Error", error.message);
  }
});

Custom Error Status Validation

自定义错误状态验证

javascript

axios.get("/user/12345", {
  validateStatus: function (status) {
    return status < 500; // Resolve only if status < 500
  },
});

javascript

axios.get("/user/12345", {
  validateStatus: function (status) {
    return status < 500; // 仅当状态码小于500时视为请求成功
  },
});

Interceptors

拦截器

Request Interceptor

请求拦截器

javascript

axios.interceptors.request.use(
  (config) => {
    // Add auth token to headers
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

javascript

axios.interceptors.request.use(
  (config) => {
    // 向请求头添加认证令牌
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

Response Interceptor

响应拦截器

javascript

axios.interceptors.response.use(
  (response) => {
    // Transform response data
    return response.data;
  },
  (error) => {
    // Handle common errors
    if (error.response?.status === 401) {
      // Redirect to login
      window.location.href = "/login";
    }
    return Promise.reject(error);
  },
);

javascript

axios.interceptors.response.use(
  (response) => {
    // 转换响应数据
    return response.data;
  },
  (error) => {
    // 处理常见错误
    if (error.response?.status === 401) {
      // 重定向到登录页
      window.location.href = "/login";
    }
    return Promise.reject(error);
  },
);

Authentication Retry Pattern

认证重试模式

javascript

const api = axios.create({ baseURL: "/api" });

api.interceptors.response.use(undefined, async (error) => {
  if (error.response?.status === 401) {
    await refreshToken();
    return api(error.config); // Retry original request
  }
  throw error;
});

javascript

const api = axios.create({ baseURL: "/api" });

api.interceptors.response.use(undefined, async (error) => {
  if (error.response?.status === 401) {
    await refreshToken();
    return api(error.config); // 重试原请求
  }
  throw error;
});

Request/Response Configuration

请求/响应配置

Common Configuration Options

常见配置选项

javascript

const config = {
  url: "/user",
  method: "get",
  baseURL: "https://api.example.com",
  headers: { "X-Requested-With": "XMLHttpRequest" },
  params: { ID: 12345 },
  data: { firstName: "John" },
  timeout: 5000,
  responseType: "json",
  withCredentials: false,
  validateStatus: (status) => status >= 200 && status < 300,
};

javascript

const config = {
  url: "/user",
  method: "get",
  baseURL: "https://api.example.com",
  headers: { "X-Requested-With": "XMLHttpRequest" },
  params: { ID: 12345 },
  data: { firstName: "John" },
  timeout: 5000,
  responseType: "json",
  withCredentials: false,
  validateStatus: (status) => status >= 200 && status < 300,
};

FormData Upload

FormData上传

javascript

const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("username", "john");

axios.post("/upload", formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

javascript

const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("username", "john");

axios.post("/upload", formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

Download Progress

下载进度

javascript

axios.get("/download/file", {
  onDownloadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total,
    );
    console.log(`Download: ${percentCompleted}%`);
  },
});

javascript

axios.get("/download/file", {
  onDownloadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total,
    );
    console.log(`Download: ${percentCompleted}%`);
  },
});

Response Schema

响应结构

Axios responses contain:

javascript

{
  data: {}, // Server response data
  status: 200, // HTTP status code
  statusText: 'OK', // HTTP status message
  headers: {}, // Response headers
  config: {}, // Request config
  request: {} // Request object
}

Axios响应包含以下内容：

javascript

{
  data: {}, // 服务器返回的数据
  status: 200, // HTTP状态码
  statusText: 'OK', // HTTP状态信息
  headers: {}, // 响应头
  config: {}, // 请求配置
  request: {} // 请求对象
}

Best Practices

最佳实践

Use instances for different APIs or configurations
Implement interceptors for auth, logging, and error handling
Set timeouts to prevent hanging requests
Handle errors at appropriate levels
Use TypeScript for better type safety
Cancel requests when components unmount

使用实例处理不同的API或配置
实现拦截器用于认证、日志记录和错误处理
设置超时时间避免请求挂起
在合适层级处理错误
使用TypeScript提升类型安全性
组件卸载时取消请求

TypeScript Support

TypeScript支持

typescript

import axios, { AxiosResponse } from "axios";

interface User {
  id: number;
  name: string;
  email: string;
}

const response: AxiosResponse<User> = await axios.get<User>("/user/123");
const user: User = response.data;

typescript

import axios, { AxiosResponse } from "axios";

interface User {
  id: number;
  name: string;
  email: string;
}

const response: AxiosResponse<User> = await axios.get<User>("/user/123");
const user: User = response.data;