从零开始搭建React+TypeScript+webpack开发环境-基于axios的Ajax请求工具

什么是axios

axios是一款基于Promise的HTTP客户端，适用于浏览器和Node.js环境。它的特点包括：

1. 支持浏览器和Node.js环境。
2. 支持Promise API。
3. 支持拦截请求和响应。
4. 支持取消请求。
5. 自动转换JSON数据。
6. 支持CSRF保护。

使用axios可以更方便地发送HTTP请求，并且对请求和响应进行拦截、转换等处理。它可以在浏览器端和Node.js环境中使用，很适用于进行数据交互。

安装axios

yarn add axios

创建token工具方法

// 定义访问令牌的常量键名
export const ACCESS_TOKEN = 'access_token';// 获取访问令牌
export const getAccessToken = () => {return localStorage.getItem(ACCESS_TOKEN);
};// 设置访问令牌
export const setAccessToken = (token: string) => {localStorage.setItem(ACCESS_TOKEN, token);
};// 移除访问令牌
export const removeAccessToken = () => {localStorage.removeItem(ACCESS_TOKEN);
};// 用于模拟刷新令牌的函数，可根据实际需求替换为真实刷新逻辑
export const refreshAccessToken = async () => {return Promise.resolve('123456'); // 返回新的令牌
};

request工具方法

当然，以下是一个更具体的分步骤介绍代码块的 Markdown 博文示例：

创建 Axios 实例

首先，我们需要创建一个 Axios 实例并配置默认请求头。这个实例将用于所有的网络请求。以下是创建 Axios 实例的示例代码：

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';
import { API_HOST, LOGIN_URL } from './config';// 创建一个 Axios 实例并配置默认请求头
const instance: AxiosInstance = axios.create({baseURL: API_HOST, // 设置基本 URL
});

请求拦截器

请求拦截器用于修改请求配置，例如添加身份验证标头。以下是请求拦截器的示例代码：

instance.interceptors.request.use((config) => {let { url } = config;if (!url) {throw new Error('url不能为空');}if (url.indexOf('://') === -1) {url = `${API_HOST}${url}`;}const modifiedConfig = { ...config, url };if (!(modifiedConfig.data instanceof FormData)) {modifiedConfig.headers['Content-Type'] = 'application/json';}// 如果有访问令牌，将其添加到请求头const token = getAccessToken();if (token) {modifiedConfig.headers.Authorization = `JWT ${token}`;}return config;},async (error) => Promise.reject(error),
);

响应拦截器

响应拦截器用于处理响应，包括处理错误和刷新令牌。以下是响应拦截器的示例代码：

// 响应拦截器：用于处理响应
instance.interceptors.response.use((response: AxiosResponse) => {if (response.status === 204) {return response;}return response.data;},async (error: AxiosError) => {const { response } = error;if (response?.status === 401) {try {// 尝试无感刷新tokenconst newAccessToken = await refreshAccessToken();setAccessToken(newAccessToken);const originalRequest = error.config;if (originalRequest) {originalRequest.headers.Authorization = `JWT ${newAccessToken}`;// 重新发送原始请求return axios(originalRequest);}} catch (refreshError) {removeAccessToken();// 处理未授权 (401) 响应，重定向到登录页面const redirectUri = window.location.href;let secondsToLogin: number = 5;const modal = Modal.error({title: '凭证失效',content: `你的登录凭证已失效，${secondsToLogin}s后将跳转到登录页面`,});const timer = setInterval(() => {secondsToLogin -= 1;modal.update({content: `你的登录凭证已失效，${secondsToLogin}s后将跳转到登录页面`,okText: '立即登录',afterClose: () => {clearInterval(timer);window.location.href = `${LOGIN_URL}?${stringify({redirectUri,})}`;},});});setTimeout(() => {clearInterval(timer);modal.destroy();}, secondsToLogin * 1000);}}// 处理网络错误，显示通知notification.error({message: '网络错误，请联系管理员',});return Promise.reject(error);},
);