TypeScript利用TS封装Axios实战

下面是“TypeScript利用TS封装Axios实战”的完整攻略：

前置要求

在开始使用TypeScript封装Axios前，需要确保已经安装并了解以下知识：

• Node.js：用于在本地运行TypeScript和生成JavaScript文件。
• TypeScript：在Node.js环境下编写TypeScript代码，需要先进行TypeScript的安装和配置。
• Axios：已经知道如何使用Axios发送请求，包括如何配置请求头和请求体和如何处理响应数据。如果你不熟悉Axios，请先了解及其基本使用方法和API。

创建项目

首先，我们需要创建一个新的TypeScript项目。使用以下命令进行初始化：

mkdir typescript-axios && cd typescript-axios
npm init -y

然后，我们需要使用npm安装必要的依赖：

npm install --save-dev typescript ts-loader webpack webpack-cli
npm install axios @types/axios --save

• typescript：TypeScript编译器，用于将TypeScript文件编译为JavaScript文件。
• ts-loader：Webpack的TypeScript加载器，用于使Webpack能够使用TypeScript文件。
• webpack和webpack-cli：用于打包和构建我们的应用程序。
• axios和@types/axios：Axios库和Axios库的TypeScript类型定义。

创建Axios实例

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。为了使用Axios，我们需要引入它：

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

我们可以使用Axios来执行网络请求，对于每个请求，我们可以将其封装为一个函数，并将其封装到单独的模块中。

首先，我们需要创建一个Axios实例，以便在应用程序的各个部分重用获取Axios实例的代码。我们可以将Axios实例放在一个单独的模块中，以便我们可以轻松地从其他模块中导入它。

在src目录中创建一个文件名为http.ts的文件，然后添加以下代码：

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

const http: AxiosInstance = axios.create({
  baseURL: 'https://api.github.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default http;

我们在调用axios.create()时传递了一个AxiosRequestConfig对象，该对象包含我们在创建Axios实例时要使用的各种配置选项。这包括将用于所有请求的默认请求头（headers）和默认超时时间（timeout）。我们可以为每个请求提供自定义配置，并覆盖默认配置。

请求拦截器和响应拦截器

我们可以用请求拦截器（request）进行一些网络请求前的拦截处理，比如在请求头中添加Token，或者对请求进行加密等；用响应拦截器（response）进行一些网络响应后的公共处理，比如对响应数据的状态码进行统一处理，然后再返回处理完数据。

在http.ts中，我们可以添加请求拦截器和响应拦截器。在请求拦截器中，我们可以在每个请求中添加Token、时间戳等参数；在响应拦截器中，我们可以统一处理服务器返回的数据格式，并对错误进行统一处理。

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

const http: AxiosInstance = axios.create({
  baseURL: 'https://api.github.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 添加请求拦截器
http.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求头中添加Token等信息
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  (response: AxiosResponse) => {
    // 统一处理服务器返回的数据格式
    const { status, data } = response;
    if (status === 200 && data.code === 200) {
      return Promise.resolve(data);
    } else {
      return Promise.reject(data.message);
    }
  },
  (error: any) => {
    // 统一处理错误信息
    if (error && error.response) {
      const { status, data } = error.response;
      switch (status) {
        case 400:
          error.message = '错误请求';
          break;
        case 401:
          error.message = '未授权，请重新登录';
          break;
        case 403:
          error.message = '拒绝访问';
          break;
        case 404:
          error.message = '请求错误，未找到该资源';
          break;
        case 408:
          error.message = '请求超时';
          break;
        case 500:
          error.message = '服务器内部错误';
          break;
        default:
          error.message = `连接错误${status}`;
          break;
      }
    } else if (!error.response) {
      error.message = '连接服务器失败！';
    }
    return Promise.reject(error);
  }
);

export default http;

发送请求

现在我们可以使用封装好的Axios实例来发送请求了。我们可以将请求封装到单独的模块中，以便我们可以轻松地从其他模块中导入它。

比如，我们可以在src目录中创建一个文件名为example.ts的文件，并定义以下接口：

export interface User {
  id: number;
  login: string;
  avatar_url: string;
  created_at: string;
  updated_at: string;
}

我们可以用以下代码来导入Axios实例，并用其发送请求：

import http from './http';
import { User } from './example';

export const getUserById = async (id: number): Promise<User> => {
  const { data } = await http.get(`/users/${id}`);
  return data;
};

在这个例子中，我们使用了封装好的Axios实例来发送GET请求。我们使用了Axios的get()方法，并传入GitHub API的请求地址。我们从响应中得到了GitHub API返回的数据，并将其简化为简单的对象。

同样的，我们也可以用以下代码来发送POST请求：

import http from './http';
import { User } from './example';

export const createUser = async (user: User): Promise<User> => {
  const { data } = await http.post('/users', user);
  return data;
};

在这个例子中，我们使用了封装好的Axios实例来发送POST请求。我们使用了Axios的post()方法，并传入GitHub API的请求地址和我们要创建的用户对象。我们从响应中得到了GitHub API返回的数据，并将其简化为简单的对象。

总结

这就是使用TypeScript封装Axios的完整攻略。在这个过程中，我们创建了一个Axios实例，并为其添加了请求拦截器和响应拦截器。我们通过将每个请求封装为一个函数，使其易于在应用程序的各个部分重用获取Axios实例的代码。我们还展示了如何使用Axios实例来发送GET和POST请求，并处理响应和错误。

新手或初学者可以在封装过程中多尝试，操作过程中也可以参考官方Api一一测试，感受其中乐趣。

以上是我对“TypeScript利用TS封装Axios实战”的详细解释，你有没有理解？