Typescript Axios - 程序员必备

简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，它是一个非常流行的网络请求工具，适用于前端和后端开发。在 Typescript 中使用 Axios，开发过程中能提高代码的可靠性和可维护性。

安装

可通过以下命令使用 NPM 安装 Axios：

npm install axios

使用

以下是一个基本的 Typescript Axios 请求示例：

import axios, { AxiosResponse } from 'axios';

interface User {
  id: number,
  name: string,
  email: string,
  phone: string
}

const getUserData = async (): Promise<User> => {
  const response: AxiosResponse<User> = await axios.get('https://jsonplaceholder.typicode.com/users/1');
  return response.data;
}

const userData = await getUserData();
console.log(userData);

请求 Interceptor 和响应 Interceptor

Axios 的请求 Interceptor 和响应 Interceptor 允许我们在请求或响应被处理前对其进行修改或拦截。以下是一个基本的请求 Interceptor 示例：

import axios, { AxiosRequestConfig } from 'axios';

axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    config.headers.authorization = 'Bearer ' + localStorage.getItem('access_token');
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

以下是一个基本的响应 Interceptor 示例：

import axios, { AxiosResponse } from 'axios';

axios.interceptors.response.use(
  (response: AxiosResponse) => {
    return response;
  },
  (error: any) => {
    if (error.response.status === 401) {
      // 处理未授权错误
    } else if (error.response.status === 500) {
      // 处理服务器内部错误
    } else {
      return Promise.reject(error);
    }
  }
);

配置

Axios 允许我们在创建实例时传递一个配置对象，该对象可以包含需要的请求和响应设置。以下是一个基本的配置示例：

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';

const axiosConfig: AxiosRequestConfig = {
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 3000
};

const axiosInstance: AxiosInstance = axios.create(axiosConfig);

interface User {
  id: number,
  name: string,
  email: string,
  phone: string
}

const getUserData = async (): Promise<User> => {
  const response: AxiosResponse<User> = await axiosInstance.get('users/1');
  return response.data;
}

const userData = await getUserData();
console.log(userData);

错误处理

Axios 的错误处理可以传递一个回调函数来进行错误处理。以下是一个基本的错误处理代码示例：

import axios, { AxiosError } from 'axios';

axios.get('https://jsonplaceholder.typicode.com/missing-page')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error: AxiosError) => {
    console.log(error.response.status);
  });

总结

使用 Axios 可以非常方便地进行网络请求操作。在 Typescript 中使用 Axios，可以有效提高代码的可靠性和可维护性，值得开发者学习使用。