三十的博客

Axious 基础学习

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
阅读量 加载中...

什么是 Axios？​

一个基于 ​Promise​ 的 HTTP 客户端，用于浏览器和 Node.js。

​ 核心能力：

安装与基本用法

bash 
npm install axios
javascript 
import axios from "axios";

// 发起 GET 请求
axios
  .get("https://api.example.com/data")
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

// 发起 POST 请求
axios.post("https://api.example.com/login", { username: "admin" });

Axios 核心功能

请求配置

javascript 
axios.request({
  url: "/api/data", // 请求地址
  method: "GET", // 请求方法
  baseURL: "https://api.example.com", // 基础 URL
  headers: { "X-Token": "xxx" }, // 请求头
  params: { id: 1 }, // URL 参数（GET）
  data: { key: "value" }, // 请求体（POST/PUT）
  timeout: 5000, // 超时时间（毫秒）
});

响应结构

javascript 
interface AxiosResponse<T = any> {
  data: T; // 服务器返回的数据
  status: number; // HTTP 状态码
  statusText: string; // 状态描述
  headers: any; // 响应头
  config: AxiosRequestConfig; // 请求配置
}

拦截器（Interceptors）​

请求拦截器

javascript 
axios.interceptors.request.use((config) => {
  // 在发送请求前添加 Token
  config.headers.Authorization = "Bearer xxx";
  return config;
});

响应拦截器

javascript 
axios.interceptors.response.use(
  (response) => {
    // 对响应数据做统一处理
    return response.data;
  },
  (error) => {
    // 对错误做统一处理
    if (error.response.status === 401) {
      alert("登录过期！");
    }
    return Promise.reject(error);
  }
);

取消请求

javascript 
const source = axios.CancelToken.source();

axios.get("/api/data", {
  cancelToken: source.token,
});

// 取消请求
source.cancel("用户取消了请求");

项目实战技巧

封装统一请求类

typescript 
// src/utils/request.ts
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";

class ApiClient {
  private instance: AxiosInstance;

  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config);
    this.setupInterceptors();
  }

  private setupInterceptors() {
    // 请求拦截器
    this.instance.interceptors.request.use((config) => {
      config.headers.Authorization = "Bearer xxx";
      return config;
    });

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response) => response.data,
      (error) => {
        if (error.response?.status === 401) {
          console.error("Token 过期");
        }
        return Promise.reject(error);
      }
    );
  }

  public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.instance.get(url, config);
  }

  public post<T>(
    url: string,
    data?: any,
    config?: AxiosRequestConfig
  ): Promise<T> {
    return this.instance.post(url, data, config);
  }
}

export default new ApiClient({
  baseURL: "https://api.example.com",
  timeout: 5000,
});

错误统一处理

typescript 
interface ErrorResult {
  code: number;
  message: string;
}

axios.interceptors.response.use(
  (response) => response.data,
  (error: AxiosError<ErrorResult>) => {
    if (error.response?.data.code === 1001) {
      ElMessage.error(error.response.data.message);
    }
    return Promise.reject(error);
  }
);
#Axios #Typescript